HTMLElement를 문자열로 변환하는 방법

Question 1

서버 측과 데이터를 교환하기 위해 JavaScript에서 XML 요소를 만들 것입니다. 나는 그것을 할 수 있다는 것을 알았다 document.createElement. 그러나 나는 그것을 문자열로 변환하는 방법을 모릅니다. 더 쉽게 할 수 있도록 브라우저에 API가 있습니까? 아니면이 API를 포함하는 JS 라이브러리가 있습니까?

편집 : 브라우저 API XMLSerializer를 찾았습니다. 문자열로 직렬화하는 올바른 방법이어야합니다.

Question 2

요소를 복제하고 비어있는 'offstage'컨테이너에 추가하고 컨테이너의 innerHTML을 읽어 'outer-html'을 얻을 수 있습니다.

이 예제는 선택적 두 번째 매개 변수를 사용합니다.

요소의 하위 항목을 포함하려면 document.getHTML (element, true)를 호출하십시오.

document.getHTML= function(who, deep){
    if(!who || !who.tagName) return '';
    var txt, ax, el= document.createElement("div");
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    if(deep){
        ax= txt.indexOf('>')+1;
        txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
    }
    el= null;
    return txt;
}

Question 3

element outerHTML속성 (참고 : 버전 11 이후 Firefox에서 지원됨 )은 전체 요소의 HTML을 반환합니다.

예

<div id="new-element-1">Hello world.</div>

<script type="text/javascript"><!--

var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>

--></script>

마찬가지로을 사용 innerHTML하여 주어진 요소에 포함 된 HTML innerText을 가져 오거나 요소 내부에 텍스트를 가져올 수 있습니다 (HTML 마크 업 제외).

또한보십시오

Question 4

가장 쉬운 방법은 해당 요소의 innerHTML을 tmp 변수에 복사하고 비운 다음 새 요소를 추가 한 다음 tmp 변수를 다시 복사하는 것입니다. 다음은 헤드 상단에 jquery 스크립트를 추가하는 데 사용한 예입니다.

var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;

그 간단한 :)

Question 5

있다 tagName재산 및 attributes과 재산은 :

var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++) {
    var attrib = element.attributes[i];
    openTag += " "+attrib.name + "=" + attrib.value;
}
openTag += ">";
alert(openTag);

HTML 요소의 모든 속성을 반복하는 방법 도 참조하십시오 . (내가!)

열기 및 닫기 태그 사이의 내용을 얻으려면 innerHTML모든 하위 요소를 반복하지 않으려는 경우 사용할 수 있습니다.

alert(element.innerHTML);

... 그리고 tagName.

var closeTag = "</"+element.tagName+">";
alert(closeTag);

Question 6

이것은 모든 경우에 적용되지 않을 수도 있지만 xml에서 추출 할 때이 문제가 발생하여이 문제를 해결했습니다.

function grab_xml(what){
var return_xml =null;
    $.ajax({
                type: "GET",
                url: what,
                success:function(xml){return_xml =xml;},
        async:   false
        });
return(return_xml);
}

그런 다음 xml을 가져옵니다.

var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");

그런 다음 html 태그가 포함 된 XML 파일에서 읽어야 할 때 xml line을 추출하도록이 함수를 만들었습니다.

    function extract_xml_line(who){
    var tmp = document.createElement("div");
    tmp.appendChild(who[0]);
    var tmp=$(tmp.innerHTML).html();
    return(tmp);
}

이제 결론을 내리겠습니다.

var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo  <b>in bold</b>

Question 7

나는 Angular를 사용하고 있었고 같은 것이 필요했고이 포스트에 도착했습니다.

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;

Question 8

요소가 전체라고 가정합니다 [object HTMLDocument]. 다음과 같이 문자열 로 변환 할 수 있습니다 .

const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;

const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]

const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;

console.log(doctype + html);

스 니펫 확장