JS 임베드 코드를 통해 HTML을 삽입하는 방법

페이지에 일부 HTML 코드를 삽입하는 js 코드 스 니펫을 사용자에게 제공해야합니다.JS 임베드 코드를 통해 HTML을 삽입하는 방법

내가 할 수있는 최선의 방법이 무엇인지 궁금합니다. document.write를 사용해야합니까? 프로그래밍 방식으로 DOM을 통해 모든 HTML 요소를 만들어야합니까?

js 라이브러리를 사용할 수 있습니까? 코드가 포함 된 웹 페이지에 이미 라이브러리가 포함되어있는 경우 충돌이 발생할 수 있습니다. 라이브러리를 사용하는 것은 아마 너무 헤비급

2010-07-26 rksprst

는 DOM 요소를 삽입하는 것은 매우 상세하고 대상 사이트가 application/xhtml+xml 콘텐츠 형식을 사용하는 경우 document.write를 작동하지 않을 수 있습니다. 가장 좋은 방법은 document.createElement을 사용하여 하나의 요소를 구성한 다음 그것에 innerHTML을 설정하는 것입니다.

출처

2010-07-26 18:07:17

간단한 삽입 기능을 사용하면 순수 js를 사용할 수 있습니다. 그렇지 않으면 복잡한 기능을 제공하려는 경우 라이브러리를 사용할 수 있습니다. 이 경우 최선의 선택은 충돌 (noConflict 모드, YUI 등의 jQuery)을 방지하기 위해 루트 객체 (배열, 함수, 문자열)를 확장하지 않는 lib입니다.

어쨌든 기존 요소의 innerHTML 설정을 사용하거나 새로운 요소를 만드는 것이 더 바람직하지 않습니다.

출처

2010-07-26 18:13:07 fantactuka

제안 :

를 삽입 출력을 표시 할 곳이 DIV :

이

<div id="uniqueTargetID" style="display: none;"></div>

다음 페이지의 하단이있다 : (원격 호스트

<script src="snippet.js"></script>

이 파일 또는 그렇지 않은 경우)에는 다음과 같이 간단한 텍스트를 출력 할 수 있습니다.

도울 수 있다면 document.write()를 사용하지 마십시오.

출처

2010-07-26 18:21:04 donohoe

html에 작은 따옴표 나 큰 따옴표가 있으면 어떻게됩니까? "with \"를 바꾸는 것보다 js를 벗어나는 더 좋은 방법이 있습니까? – rksprst

하나의 nitpick ... html.join (''), 그대로두면 쉼표를 얻을 수 있습니다. :) – Tracker1

rksprst : 여기에 제안 된 해결책 중 하나에 해당 문제가 있습니다. 대답은 데이터의 출처, 형식, 사용 방법에 따라 달라집니다. – donohoe

자바 스크립트 ::

//to avoid global bashing 
(function(){ 
    var target = document.getElementById('ScriptName'), 
    parent = target.parentElement, 
    oput = document.createElement('div'); 
    oput.innerHTML = "<p>Some Content</p>"; 
    parent.insertBefore(oput, target); 
}());

HTML은 : 클라이언트/사람들에게주는

는

<script type="text/javascript" id="ScriptName" src="/path/to/ScriptName.js"><script>

SCRIPTNAME는 스크립트에 고유 한 뭔가해야합니다.

출처

2010-07-26 18:38:48 Rixius

이 [post] (http://alexmarandon.com/articles/web_widget_jquery/)는 스크립트를 보완합니다. –

JS 임베드 코드를 통해 HTML을 삽입하는 방법

답변

관련 문제