1.在文本域中输入信息,点击按钮把文本于内容渲染在页面上,并且文本域为空时不能添加。
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
<button id="release">发布</button>
<script>
let ul = document.createElement('ul'); // 创建ul节点
release.onclick = function () {
let textarea = document.getElementById('textarea').value // 获取文本域的值
let release = document.getElementById('release');
if (textarea != 0) { // 对文本域拿到的信息进行判断
let textNode = document.createTextNode(textarea);
let liNode = document.createElement('li');
liNode.appendChild(textNode);
ul.appendChild(liNode);
}
}
document.body.appendChild(ul);
</script>
2.在文本框中输入信息,点击按钮把文本于内容渲染在页面上。
<div id="container">
<h2 id="h2">颐和园</h2>
<input type="text" id="inputVal"> <button id="addMsg">添加</button>
</div>
<script>
let addMsg = document.querySelector('#addMsg');
addMsg.onclick = function () {
let container = document.getElementById('container');
let inputVal = document.querySelector('#inputVal').value;
let textNode = document.createTextNode(inputVal);
let myH2 = document.createElement('h2');
myH2.appendChild(textNode);
let h2 = document.getElementById('h2')
if (h2.parentNode) {
h2.parentNode.insertBefore(myH2, container.firstChild.nextSibling)
}
}