javaScript操作在html中写入标签和内容
1.写入标签innerHTML
在id为box的div标签中写入一个span标签,这里需要注意的是,写入不是增加,而是替换,会覆盖原来的内容,也就是说原来标签内的内容全部都没有了
var box = document.getElementById("box")
box.innerHTML="<span>456</span>"
2.写入内容innerText
这里也是将内容覆盖,而不是添加
var box = document.getElementById("s")
box.innerText="456"
如果想添加,解决办法是:利用拼接
var box = document.getElementById("s")
box.innerText=box.innerText+"456";
3.在一个标签内增加标签 appendChild
默认添加在父标签的最后
这里需要先创建一个标签元素,用到的方法是document.createElement
创建一个span标签
var span = document.createElement("span")
写入内容
span.innerText = "123"
添加到父标签中
box.appendChild(span)
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<img src=""/>
<p class="PPP"><span id="s">789</span></p>
</div>
<script type="text/javascript">
var box = document.getElementById("box")
var span = document.createElement("span")
span.innerText = "123"
box.appendChild(span)
</script>
</body>
</html>