JavaScript로 HTML 요소 삽입

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]);

혜택:

1. insertBefore, appendChild 등과 같은 삽입을 위해 네이티브 DOM 메서드를 사용할 수 있습니다.
2. 삽입되기 전에 실제 DOM 노드에 액세스 할 수 있습니다. 조각의 childNodes 개체에 액세스 할 수 있습니다.
3. 문서 조각을 사용하는 것은 매우 빠릅니다. 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>');

---

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

I use a form to templating by adding "template" elements to a hidden DIV and then using cloneNode(true) to create a clone and appending it as required. Bear in ind that you do need to ensure you re-assign id's as required to prevent duplication.

---

If you want to insert HTML code inside existing page's tag use Jnerator. This tool was created specially for this goal.

Instead of writing next code

    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;

You can write more understandable structure

    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;

---

As others said the convenient jQuery prepend functionality can be emulated:

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

While some say it is better not to "mess" with innerHTML, it is reliable in many use cases, if you know this:

If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use Node.textContent to get a correct copy of these text nodes' contents.

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

Or:

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

insertAdjacentHTML is probably a good alternative: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

참고URL : https://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript