用js或者jquery动态给div追加内容，不覆盖之前的内容

原创已于 2022-07-27 14:44:38 修改 · 置顶 · 9.6w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #servlet

于 2018-03-19 15:51:02 首次发布

JavaScript 同时被 2 个专栏收录

120 篇文章

订阅专栏

JQuery

60 篇文章

订阅专栏

本文介绍如何使用JavaScript和JQuery动态地修改HTML页面内容，包括文本、属性及子元素的更新。通过实例展示了不同方法的效果对比，帮助开发者更好地理解和运用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：js

<div id="append">ss</div>
<script>
var divA = document.getElementById("append");
    divA.innerHTML = divA.innerText+'追加的内容s';
    //divA.innerHTML +='追加的内容s';
    divA.innerHTML = divA.innerHTML+'<h3>追加内容为H3字体</h3>';
</script>

var itemHtml="";
for(var i=0,len=value.length;i<len;i++){
　　itemHtml+=”<li>”+value[i]+”</li>”; //避免这种频繁操作
}
ul.innerHTML=intemHtml; 性能好

动态创建添加：
let div = document.createElement('div');
div.id="div1"
div.innerHTML = '<span>123</span>'
document.body.appendChild(div)

效果：jq

<div id="append">
  <span>文本</span>
  <p>This is a paragraph.</p>
  <ol>
  <li>List item 1</li>
  </ol>
</div>
<script>
$(document).ready(function(){
    $('span').append('随便加文本');//无效果
    $("p").append(" <b>Appended text</b>.");//有标签效果
    $("ol").append("<li>Appended item</li>");
});
</script>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<script type="text/javascript">
$(document).ready(function(){
    $("p:first-child").html("Hello <b>world!</b>");//替换里面的所以内容  $("p").eq(0).html("Hello <b>world!</b>")第一个p
});
</script>

jquery中val()与之类似，
$(this).val();获取某个元素节点的value值，相当于$(this).attr("value");
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr("value",value);