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

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>

2017 년 에 Edge 15 및 IE 12에 대해 prepend 메서드는 Div 요소의 속성으로 포함되어 있지 않지만 polyfill에 대한 빠른 참조가 필요한 사람은 다음과 같이 만들었습니다.

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

대부분의 최신 브라우저와 호환되는 간단한 화살표 기능.

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

referenceElement가 null이거나 정의되지 않은 경우 newElement는 자식 노드 목록의 끝에 삽입됩니다.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

예제는 다음에서 찾을 수 있습니다. Node.insertBefore

unshift ()를 사용하여 목록 앞에 추가 할 수도 있습니다.

이것은 최선의 방법은 아니지만 누군가가 모든 것 앞에 요소를 삽입하려면 여기에 방법이 있습니다.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);