<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
width : 50%;
height : auto;
margin : 10px;
border : 1px dotted red;
}
#d2{
word-wrap: break-word;
}
#d3{
word-wrap: break-word;
}
</style>
<script>
function proc(){
vd3 = document.getElementById("d3");
txt = document.createTextNode("Hello");
vd3.append(txt);
}
</script>
</head>
<body>
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="d2">
word-warp : break-word;<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="d3">
word-warp : break-word;<br><br>
//id가 d3인 div요소로 접근
vd3 = document.getElementById("d3");<br>
//Hello라는 글자를 만들어 추가한다.<br>
//글자 만들기<br>
txt = document.createTextNode("Hello");<br>
//vd3에 추가하기<br>
vd3.append(txt);<br><br>
</div>
<input type="button" onclick="proc()" value="확인">
</body>
</html>
