<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="divId">
你好！
<span id="spanId">
hello world
</span>
</div>
<script>
var firstId = document.getElementById("divId");
var secondId = document.getElementById("spanId");
// insertAdjacentText 与 insertAdjacetHTML
/* insertAdjacetHTML 在指定的地方插入 html 内容和文本内容。性能上比 innerHTML 要好，insertAdjacentText 与之类似，差别在于只支持插入纯文本，
语法：element.insertAdjacentHTML(position, text);
position 参数：
beforeBegin：在该元素前插入；
afterBegin：在该元素第一个子元素前插入；
beforeEnd：在该元素最后一个子元素后面插入；
afterEnd：在该元素后插入*/
firstId.insertAdjacentHTML('beforeBegin', '<div>显示了吗？</div>');
firstId.insertAdjacentText('afterBegin', '<div>这个也成功了吗？</div>');
console.log("firstId insertAdjacontText: " + firstId.insertAdjacentText)
console.log("secondId insertAdjacontText: " + secondId.insertAdjacentHTML)
// innerHTML
/*指定地方插入 html 文本与内容*/
console.log("innerHTML: " + firstId.innerHTML)
// secondId.innerHTML = '<p>哈哈哈哈</p>'
// innerText
/*指定地方插入纯文本*/
console.log('innerText: ' + firstId.innerText)
secondId.innerText = '<p>哈哈哈哈</p>'
</script>
</body>
</html>
网友评论