[javascript] JavaScript로 HTML 요소 삽입

다음 구문을 사용할 때 각 속성 및 이벤트 유형에 대한 해결 방법을 지루하게 검색하는 대신 :

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

전체 HTML 요소를 문자열로 선언 할 수있는 방법이 있습니까? 처럼:

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

답변

직접 엉망으로 innerHTML만드는 대신 조각을 만든 다음 삽입하는 것이 좋습니다.

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

혜택:

insertBefore, appendChild 등과 같은 삽입을 위해 네이티브 DOM 메서드를 사용할 수 있습니다.
삽입되기 전에 실제 DOM 노드에 액세스 할 수 있습니다. 조각의 childNodes 개체에 액세스 할 수 있습니다.
문서 조각을 사용하는 것은 매우 빠릅니다. DOM 외부에 요소를 만드는 것보다 빠르며 특정 상황에서는 innerHTML보다 빠릅니다.

innerHTML함수 내에서 사용 되지만 모든 것이 DOM 외부에서 발생하므로 생각보다 훨씬 빠릅니다.

답변

당신은 이것을 원합니다

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

답변

insertAdjacentHTML 살펴보기

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

position 은 삽입하려는 요소에 대한 상대적인 위치 입니다.

‘beforebegin’
요소 자체 앞

‘afterbegin’
요소 바로 안쪽, 첫 번째 자식 앞

‘beforeend’
요소 바로 내부, 마지막 자식 뒤

‘afterend’
요소 자체 뒤

답변

구식 JavaScript에서는 다음과 같이 할 수 있습니다.

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

귀하의 의견에 대한 답변 :

[…] 요소가 아닌 새 요소의 속성과 이벤트의 소스를 선언하는 데 관심이있었습니다 innerHTML.

하지만 새 HTML을 DOM에 삽입해야합니다. 이것이 innerHTML구식 JavaScript 예제에서 사용되는 이유 입니다. innerHTML의 BODY요소는 새로운 HTML로 앞에 추가됩니다. .NET 내부의 기존 HTML을 실제로 건드리지 않습니다 BODY.

이를 명확히하기 위해 위에서 언급 한 예를 다시 작성하겠습니다.

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

JavaScript 프레임 워크를 사용하면이 코드가 훨씬 덜 장황 해지고 가독성이 향상됩니다. 예를 들어 jQuery를 사용하면 다음을 수행 할 수 있습니다.

$('body').prepend('<p id="foo">Some HTML</p>');

답변

공정하게 말하면 상당히 새롭고 제한적이지만이 기술의 유일한 잠재적 인 문제는 일부 테이블 요소를 동적으로 생성 할 수 없다는 사실입니다.

숨겨진 DIV에 “템플릿”요소를 추가 한 다음 cloneNode (true)를 사용하여 복제본을 만들고 필요에 따라 추가하여 템플릿에 양식을 사용합니다. 중복을 방지하기 위해 필요에 따라 ID를 다시 할당해야한다는 점을 명심하십시오.

답변

다른 사람들이 말했듯이 편리한 jQuery prepend 기능을 에뮬레이션 할 수 있습니다.

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

어떤 사람들은 innerHTML 을 “혼잡”하지 않는 것이 낫다고 말하지만 , 다음을 알고 있다면 많은 사용 사례에서 신뢰할 수 있습니다.

경우 <div>, <span>또는 <noembed>노드는 문자를 포함하는 자식 텍스트 노드를 (가 &), ( <), 또는 ( >)는 innerHTML을은이 문자를 반환 &amp, &lt및 &gt각각. Node.textContent이러한 텍스트 노드 내용의 올바른 복사본을 가져 오는 데 사용 합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

또는:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTML아마도 좋은 대안 일 것입니다 : https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

답변

기존 페이지의 태그 안에 HTML 코드를 삽입하려면 Jnerator를 사용 하십시오 . 이 도구는이 목표를 위해 특별히 만들어졌습니다.

다음 코드를 작성하는 대신

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

더 이해하기 쉬운 구조를 작성할 수 있습니다.

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;