<body>
        <div id="root">
            <div>1</div>
            <div id="target">2</div>
            <div>3</div>
        </div>
        <script src="index3.js"></script>
    </body>
<style>
 .append-p {
     color: rgb(188, 136, 236);
     font-size: 15px;
}
</style>
const root = document.getElementById('root');
//노드 생성 과정
const p = document.createElement('p'); //p태그가 만들어지기만 한 것
//<p></p>
p.textContent = '카페';
//<p>카페</p>
//<p> 내용 삽입

p.classList.add('append-p');
//<p class = "append-p">카페</p>
p.style.fontWeight = 'bold';
//<p class = "append-p" style = 'font-weight:bold'>카페</p>
console.log(p);

root.append(p);
//append는 맨 마지막으로 들어가기 떄문에 div보다 뒤에 보여지는 것
// root.prepend(p); // 맨 위로 올라감

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.