안녕하십니까? 여기는 오솔길입니다.
이번에는 jQuery 문자열에서 DOM 요소의 일부를 생성합니다.
원본 코드에는 오류 처리, 범용화, XHTML 대응 등 처리 지점이 많기 때문에 중요한 부분만 추출하여 실체의 오솔길 흐름의 생성 처리로 소개한다.
대상 버전: jQuery -2.1.1
목록은 여기 있습니다.

jQuery의 DOM 요소 생성 구문

다음과 같이 문자열에서 JQuery를 사용하여 DOM 요소를 생성하는 구문입니다.

//bodyに要素追加
$("<b id='id1'>foo</b><br /><b id='id2'>bar</b><script type='text/javascript'>alert('alert')</script>").appendTo("body")

이제 브라우저 컨트롤러에서 이 문법을 실행합시다.

리턴 키로 ↑ 코드 실행하기

↑ 각 요소에 맞게 브라우저에 반영!
id 속성과 유형 속성 등도 반영됩니다.
나는 이것이 얼마나 대단한 일인지 생각한다.... 때문에
문자열에서 DOM 요소로 한 번에 변환할 수 있는 내장 처리가 준비되어 있지 않기 때문

자체 제작 DOM 요소 생성 처리 설치

그러면 우리는 jQuery 소스에 학습하여 DOM 요소 생성 처리를 실현할 것이다.
간소화했지만 제이큐리의 소스를 참고했기 때문에 비슷한 일을 하고 있다는 생각이 들면 좋겠어요.
수법은 크게 두 가지 방법으로 나뉜다.

단일 DOM 요소에 속성 추가 및 생성

자유 HTML 문자열 해석 및 생성

단일 DOM 요소에 속성 추가 및 생성

jQuery의 실행 모드에도 같은 것이 있습니다.
나는 이쪽에 아무런 수요가 없는 것 같지만, 한번 해 보겠다.
단일 DOM 요소 생성하기

function getSingleDom(domStr, attributes) {

  var dom = new Object(),
    rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
    context = document,
    parsed = rsingleTag.exec(domStr),
    dom, prop;

  // パターンマッチングからDOM要素名を取得して要素生成
  if ( parsed ) {
    dom = context.createElement(parsed[1]);
  } else {
    return undefined;
  }

  // 引数２のオブジェクトから属性を追加
  if (attributes) {
    for (prop in attributes) {
      dom[prop] = attributes[prop];
    }
  }

  // HTML要素を返す
  return dom;
}

키모는 정규 표현식 일치에서 꺼낸 탭 이름에서
create Element로 요소를 생성하는 곳입니까?
이제 콘솔에서 실행합시다.

↑ 하나의 매개 변수 모델로 요소가 생성되었다.

↑ 매개 변수 2 모드.첫 번째 매개변수는 태그 이름이고 두 번째 매개변수는 태그의 속성 객체입니다.
를 클릭하면 이벤트가 발생하고 경고가 표시됩니다.응, 느낌이 좋아.

자유 HTML 문자열 해석 및 생성

이번에는 활용도가 높다고 여겨지는 자유 문자열을 이용한 요소 생성이다.
나는 SCRIPT 요소의 처리에 문제가 있다.
HTML 문자열에서 DOM 요소 생성하기

function getMultiDom(domStr) {

  var context = document,
    fragment = context.createDocumentFragment(),
    nodes = [],
    scripts = [],
    i = 0, j = 0, elem, tmp;

  // ダミーのDIV要素を作成して中にテキストを挿入
  tmp = fragment.appendChild( context.createElement("div"));
  tmp.innerHTML = domStr;

  for ( ; i < tmp.childNodes.length; i++) {
    // ダミーのDIV要素からHTML要素としてchildNodesで取り出せる
    var node = tmp.childNodes[i];

    // SCRIPT要素は新たに生成し直さなければ実行されない
    if (node.tagName.toLowerCase() === 'script') {
      var script = document.createElement('script');
      if (node.type) {
        script.type = node.type;
      }
      if (node.src) {
        script.src = node.src;
      } else {
        script.text = node.text;
      }
      nodes[i] = script;
    } else {
      // SCRIPT以外の要素
      nodes[i] = node;
    }
  }

  // HTML要素配列を返す
  return nodes;
}

자유 문자열에서 DOM을 생성하는 가장 큰 요점은
매개 변수의 HTML 문자열을 innerHTML로 가상 DIV 요소에 삽입하고childNodes로 꺼내기
이렇게 하면 HTML 요소로 해석할 수 있다.
그러나 이런 방식은 SCRIPT 요소에만 대응할 수 없다.
생성할 때 페이지에 요소를 추가할 때 JS 코드가 실행되지 않습니다.
SCRIPT 요소 이동하기
새 SCRIPT 요소 생성, 속성 마이그레이션 및 페이지 삽입
그럼 이쪽도 움직여봐.

↑ 중첩된 구조의 HTML 요소도 처리되고 ID 검색도 가능합니다.

↑ 인라인 코드의 JavaScript도 작동합니다.

↑ 외부 소스의 JavaScript도 작동합니다.
이 코드는 완벽하지 않으니 다시 한 번 주의하세요!

例えば入れ子の場合に小要素がSCRIPTだと動きません。
親要素だけを抽出してSCRIPT検査を行っている為です。
解決する為には小要素にSCRIPTがあれば内側要素を取り出して検査する、という
メンドーな工程が発生したので端折りました。
その他XHTML対応や細かいブラウザ毎の対応等も必要で、
完全に実装するには結構なコードボリュームと検証を要すると思われます。

총결산

어때요?
이 길은 평소에 문자열에서 DOM 요소를 만들려고 하는 경우가 많습니다.
앞으로도 사용할 수 있는 실체의 샘플을 남길 수 있을 것 같습니다.
하고 싶은 일에 대해서는'생각대로 행동하지 않는다'는 경우도 많지만 jQuery장에서는
선인들의 노고와 지혜가 충만하기 때문에 참고가 될 것 같습니다.
이렇게 검색, 생성의 대략적인 절차를 한 번 보았다.
다음 조사jQuery 함수와 jQuery 실례 확장.