添加javascript innerHTML而不是替换

时间:2011-07-06 09:11:47

标签: javascript ajax dom innerhtml

快速提问,我知道我们可以更改

的内容

<div id="whatEverId">hello one<div>使用:

document.getElementById("whatEverId").innerHTML="hello two";

现在,有没有办法我可以添加东西到div而不是替换它? 所以我可以得到

<div id="whatEverId">hello one hello two<div>

(当然使用类似的东西)

6 个答案:

答案 0 :(得分:53)

<div id="whatever">hello one</div>
<script>
document.getElementById("whatever").innerHTML += " hello two";
</script>

答案 1 :(得分:3)

document.getElementById("whatEverId").innerHTML =  document.getElementById("whatEverId").innerHTML +  "hello two" + document.getElementById("whatEverId").innerHTM ;

答案 2 :(得分:2)

jcomeau_ictx建议的是编辑innerHTML的低效方法。 查看Ben cherry的PPT http://www.bcherry.net/talks/js-better-faster

正确的方法是分离元素并对其进行更改,然后将其附加回父节点。 使用此要点中的https://gist.github.com/cowboy/938767原生javascript 分离元素。

答案 3 :(得分:1)

如果您要追加,可以将=更改为+ =

document.getElementById(“whatEverId”)。innerHTML + ='hello two';

如果前缀

document.getElementById(“whatEverId”)。innerHTML ='hello two'+ document.getElementById(“whatEverId”)。innerHTML;

虽然我强烈建议使用jQuery或MooTools javascript库/框架来做这类事情。如果您要添加标签而不仅仅是文本节点,那么您应该使用DOM createElement或上述库/框架之一。

答案 4 :(得分:1)

你可以通过附加这样的div字符串来实现它。

document.getElementById('div_id')。innerHTML + ='Hello Two';

答案 5 :(得分:1)

请注意,使用element.innerHTML += 'content'会将inputtextarea清空为默认状态,空白状态,取消选中复选框等,因为整个innerHTML将由浏览器。

如果需要保留状态,则需要创建一个新元素(例如<span>)并将其附加到当前元素,如:

let newElement = 'span'
newElement.innerHTML = 'new text'
document.getElementById('oldElement').appendChild(newElement)