[javascript] 일반 JavaScript로 프리 펜드를 추가하고 추가하려면 어떻게해야합니까?

Program / 글쓴이

jQuery를 사용하지 않고 일반 JavaScript를 추가 하고 추가 하는 방법은 무엇입니까?

답변

아마도 당신은 DOM 메소드 appendChild 와 에 대해 묻고 insertBefore있습니다.

parentNode.insertBefore(newChild, refChild)

기존 자식 노드 이전의 newChild자식으로 노드 를 삽입 parentNode합니다 refChild. (을 반환합니다 newChild.)

refChildnull 인 경우 newChild자식 목록 끝에 추가됩니다. 동등하게 그리고 더 읽기 쉽게를 사용하십시오
parentNode.appendChild(newChild).

답변

다음은 스 니펫입니다.

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChild우리에게 내 첫 번째 요소에 대한 참조를 줄 것이다 theParent넣어 theKid그것을하기 전에.

답변

우리는 여기서 많은 것을주지 않았지만 요소의 시작이나 끝에 내용을 추가하는 방법을 묻는 것 같아요? 그렇다면 다음과 같이하면 쉽게 할 수 있습니다.

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

아주 쉽습니다.

답변

아무리 복잡하더라도 원시 HTML 문자열을 삽입하려면 insertAdjacentHTML적절한 첫 번째 인수와 함께 다음을 사용할 수 있습니다
.

‘before begin’
요소 자체 앞에.
‘afterbegin’
첫 번째 자식 앞에 요소 내부에 있습니다.
‘beforeend’
마지막 자식 다음에 요소 내부에 있습니다.
‘afterend’
요소 자체 이후.

힌트 : Element.outerHTML삽입 할 요소를 나타내는 HTML 문자열을 얻기 위해 항상 호출 할 수 있습니다.

사용 예 :

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

데모

주의 : insertAdjacentHTML 로 첨부 된 청취자를 보존하지 마십시오 .addEventLisntener.

답변

내 프로젝트에 이것을 추가했는데 작동하는 것 같습니다.

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

예:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

답변

인생을 단순화하기 위해 HTMLElement개체를 확장 할 수 있습니다 . 구형 브라우저에서는 작동하지 않을 수 있지만 확실히 인생을 더 편하게 만듭니다.

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

다음에이 작업을 수행 할 수 있습니다.

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

답변

다음은 prepend를 사용하여 문서에 단락을 추가하는 예입니다.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

결과: 

<p>Example text</p>