<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
h3::after {
content: ' rocks!';
}
</style>
</head>
<body>
<div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
<script>
document.body.onload = addElement;
function addElement () {
// create a new div element
var newDiv = document.createElement("div");
console.log(newDiv.outerHTML);
// and give it some content
var newContent = document.createTextNode("환영합니다!");
// add the text node to the newly created div
newDiv.appendChild(newContent);
console.log(newDiv.outerHTML);
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.appendChild(newDiv);
// document.body.insertBefore(newDiv, currentDiv);
}
</script>
</body>
</html>
댓글 영역