JavaScript - createElement(), appendChild(), innerText

Instagramコメント機能を実現するために3つの方法を用いた.

createElement()

Document. createElement()メソッドは、tagNameを指定するHTML要素を作成して返します.

let element = document.createElement('p');
let list = document.createElement('li');

これによりJavaScriptにpタグを作成できます.しかし、タグを作成しても、まだ仕事があります.今はラベルしか作っていないので、どの位置に置くか、ラベルに何を入れるかはまだ決めていません.

appendChild()

Node. appendChild()メソッドは、1つのノードを特定の親ノードのサブノードリストの最後のサブノードとして貼り付けます.ドキュメントにすでに存在するノードを参照している場合、appendChild()メソッドはノードを現在の位置から新しい位置に移動します.

새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.

let p = document.createElement("p");
document.body.appendChild(p);

appendChild()のパラメータに追加したい変数を加えます.appendChild()の前に子供になりたい位置を付けます.

innerText

HTML ElementインタフェースのinnerTextプロパティは、要素とそのサブアイテムのレンダリングテキストの内容を表します.InnerTextは、カーソルを使用して要素の内容を選択し、クリップボードにコピーしたときに得られるテキストの近似値を提供します.

인스타그램 댓글 창
HTML에서 input과 초기댓글 화면값
const commentInput = document.querySelector('.commentWrap input');
const addComment = document.querySelector('.textWrap .comment');

keyup 이벤트 추가
commentInput.addEventListener('keyup', function(value){
    let myName = '94_yongyong_lee';
    let addCommentUnoderList = document.createElement('ul'); 
    let addCommentList = document.createElement('li');
    let boldNameWrap = document.createElement('h4');
    
    if(value.code === "Enter"){
    	-----ul > h4 > li -----
        h4: 이름고정 , li :댓글입력값
        
        boldNameWrap.innerText = myName;
        addCommentList.innerText = commentInput.value;
        addComment.appendChild(addCommentUnoderList);
        addCommentUnoderList.appendChild(boldNameWrap);
        addCommentUnoderList.appendChild(addCommentList);
        
        -----스타일추가-----
        boldNameWrap.style.marginRight = "5px";
        addCommentUnoderList.style.display ="flex";
        
        console.log(commentInput.value);
        return commentInput.value = "";
    };
})