JS element.innerHTML 两种改变元素内容方法

element.innerHTML

JavaScript的element.innerHTML可以用于改变element的内容，可以是需要改变的文本，也可以是将HTML的代码字符串渲染成该元素的子元素——HTML的DOM。注意，使用innerHTML之后，调用对象内的内容将被新的内容所覆盖。

提示：调用对象element是通过JavaScript匹配查找到的HTML元素。

---

innerHTML修改元素文本内容实例，及在线编辑器

该实例中将通过docuement.getElementById()的方法查找到元素element，然后通过innerHTML来修改元素内的文本内容，运行前后文本的变化：

<p id='p1'>这是原来的内容</p>
<button onclick='setValue()'>替换文本内容</button>

<script>
  function setValue(){
    var element = document.getElementById('p1');
    element.innerHTML = '这是新的内容，文本已经改变，并覆盖原内容'
  }
</script>

试一试

innerHTML创建子元素的用法实例

实例中将通过innerHTML的方法将内容为HTML代码的字符串来创建div的子元素，并覆盖原来的子元素（段落编程按钮），实例代码如下：

<div id='d1'><p>这是原来的子元素</p></div>
<button onclick='setSubElement()'>添加子元素</button>

<script>
  function setSubElement(){
    var element = document.getElementById('d1');
    element.innerHTML = '<button class="btn btn-default">按钮</button><br><br>'
  }
</script>

试一试