HTML 문자열을 DOM 요소로 변환하시겠습니까?

HTML 문자열을 DOM 요소로 변환하시겠습니까?

HTML을 다음과 같이 변환하는 방법이 있습니까?

<div>
<a href="#"></a>
<span></span>
</div>

(append Child()를 사용할 수 있도록 하기 위해) 또는 다른 HTML 문자열이 DOM 엘리먼트에 있습니까?나는 내가 .inner를 할 수 있다는 것을 안다.HTML 및 .innerText는 제가 원하는 것이 아닙니다.문자 그대로 동적 HTML 문자열을 DOM 요소로 변환하여 .appendChild()로 전달할 수 있도록 하고 싶습니다.

업데이트: 혼동이 있는 것 같습니다.HTML의 내용은 자바스크립트 변수 값으로 문자열에 있습니다.문서에 HTML 내용이 없습니다.

를 사용할 수 있습니다.DOMParser다음과 같은 경우:

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

보통 임시 부모 요소를 만듭니다.이것에 의해,innerHTML다음 내용을 추출합니다.

var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;

만약 당신이 가지고 있는 외부-HTML의 요소가 단순하다면<div>여기처럼, 이건 쉬워요.아무 데도 갈 수 없는 다른 문제라면 더 문제가 있을 수 있습니다.예를 들어, 이 경우<li>, 부모 래퍼는,<ul>.

그러나 IE는 쓸 수 없다.innerHTML같은 요소에서<tr>그래서 만약에<td>HTML 문자열 전체를 감싸야 합니다.<table><tbody><tr>...</tr></tbody></table>, 그것을 기입해 주세요.innerHTML그리고 진짜를 꺼내서<td>몇 단계 아래를 원했잖아요

insertAdjacent를 사용하지 않는 이유HTML

예를 들어 다음과 같습니다.

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here

John Resig의 순수 JavaScript HTML 파서를 확인하십시오.

편집: 브라우저에서 HTML을 구문 분석하려면innerHTML네가 원하는 게 바로 그거야이 SO 질문에서:

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;

네, 다른 사람의 답을 생각해 본 후에 스스로 답을 깨달았어요. :P

var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);

여기 유용한 작은 코드가 있습니다.

var uiHelper = function () {

var htmls = {};

var getHTML = function (url) {
                /// <summary>Returns HTML in a string format</summary>
                /// <param name="url" type="string">The url to the file with the HTML</param>

    if (!htmls[url])
    {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    htmls[url] = xmlhttp.responseText;
     };
     return htmls[url];
    };

        return {
            getHTML: getHTML
        };
}();

--HTML 문자열을 DOM 요소로 변환합니다.

String.prototype.toDomElement = function () {

        var wrapper = document.createElement('div');
        wrapper.innerHTML = this;
        var df= document.createDocumentFragment();
        return df.addChilds(wrapper.children);
};

--도움말 도우미

HTMLElement.prototype.addChilds = function (newChilds) {
        /// <summary>Add an array of child elements</summary>
        /// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
        /// <returns type="this" />
        for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
        return this;
};

--사용방법

 thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();

한 번만 줘.id요소에 전달하여 정상적으로 처리합니다.

<div id="dv">
<a href="#"></a>
<span></span>
</div>

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

var div = document.getElementById('dv');
div.appendChild(......);

또는 jQuery를 사용하는 경우:

$('#dv').get(0).appendChild(........);

다음과 같이 할 수 있습니다.

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

언급URL : https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements