JavaScript中,可以用元素的innerHTML直接添加子元素吗?

JavaScript中,可以用元素的innerHTML直接添加子元素吗?,第1张

当然可以了,几乎所有的DOM对象都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML。要用innerHTML给元素添加子元素只要将包含有子元素的html赋值给元素的innerHTML就好了。如:

<!—需要给div元素添加子元素 -->

<body>

<p>Hello World</p>

<div id="myDiv"></div>

</body>

//将<p>元素添加到div中。

document.getElementById(“myDiv”).innerHTML = “<p>我是新添加的子元素<p>”

上面的示例较简单,赋值给innerHTML的值可以是一个表单,可以是更长更复杂的html。

虽然innerHTML属性添加子元素很方便,但容易出错,很多教程 网上(如秒秒学)都不使用。更常用添加节点的方式,来添加子元素。这样更加准确和具体的描述了DOM的变化。如上述innerHTML的语句可以替换成:

var myParaElement = document.createElement(“p”) //创建p元素

var myText = document.createTextNode(“我是文本节点!”)//创建文本节点

myParaElement.appendChild(myText) //将文本节点做为p元素的子节

document.getElementById(“myDiv”).appendChild(myParaElement) //再将p元素做为子节点放在div元素下。

<div id="a"></div>

<script>

document.getElementById("a").innerHTML="1111111111111"//11111可以写html代码

</script>

你好,innerHTML只能插件html代码。

div元素:<div id="container"></div>

插入innerHTML:

document.getElementById("container").innerHTML = "<a href='url'>link</a>"

然后取得这个刚刚插入的<a>元素:

var a = document.getElementById("container").getElementsByTagName("a")[0]

总而言之。就像 *** 作其他存在的元素一样。因为在执行innerHTML这一句的时候已经把内容加入到了文档之中了。有ID可以通过document.getElementById。没有的话可以通过object.getElementsByTagName取得相同标签名的元素的一个集合,然后通过下标取顺序。

----

上面已经说了。不管是之前的还是innerHTML插入的。只要已经确认出现在页面上面了,就是已经被插入了文档。可以一视同仁的通过各种方法获取。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11571952.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存