textContent()只能單純新增文字節點

範例：單純新增文字(text)節點，不能放 html 標籤(element)，否則會連標籤一起呈現出來

<div id="main"></div>

var el = document.getElementById('main');
el.textContent = '<h1>1234</h1>';

//<h1>1234</h1>

innerHTML()可以新增 html 標籤(element)+文字(text)

範例：可以新增 element(這邊是指h1)，所以文字會以 h1 方式呈現

<div id="main"></div>

var el = document.getElementById('main');
el.innerHTML = '<h1>1234</h1>';

//1234

範例2：原先的 hello 不會顯示，因為 innerHTML 會先清空抓到的元素節點內的值，再賦予新的值

<div id="main">hello</div>

var el = document.getElementById('main');
var str = '<h1>1234</h1>';
el.innerHTML = str + str;

//1234 1234

createElement() createElement('tag name')

可以新增一個新的元素(element)來產生 DOM，透過 appendChild() 的方式將新增的元素放入指定的 element 裡面，若被指定的 element 裡面已經有字，不會像 innerHTML 一樣被清空

<h1 class="title"><em>title</em></h1>

var str = document.createElement('em'); 
str.textContent = '123';

document.querySelector('.title').appendChild(str);

//title 123