主页 / 问题 / 1044627
Accepted
OPTIMUS PRIME
Asked:2020-11-11 04:11:04 +0000 UTC2020-11-11 04:11:04 +0000 UTC

创建嵌套 HTML 块的函数

  • 772

我想创建一个漂亮的函数，以便可以使用一个“调用链”创建和返回嵌套的 HTML 元素。
结果是函数调用（并且插入按应有的方式工作），但是在调用的最后，如何立即返回第一个创建的元素是个问题。
原来是这样的：

let html = nestHTML('div', 111)('div', 222)('div', 333, 'moo')('div', 444);

test.appendChild( html.bubu.parentNode.parentNode.parentNode );

function nestHTML(tag, textContent, className) {
  let elem = document.createElement(tag);
 
  elem.textContent = textContent || ""; 
  elem.className = className || "";
  
  if( nestHTML.bubu ){
    nestHTML.bubu.appendChild(elem);
    nestHTML.bubu = elem;
  } else {
    nestHTML.bubu = elem;
  }

  return nestHTML;
}
section div {
  border: 2px solid orange;
  padding: 5px;
}

.moo {
  border-color: red;
}
<section id="test"></section>

我想将一些较短的东西转移到主要的 appendChild。

（可以使用数组参数创建一个函数，但在这里，包括体育兴趣）。

javascript

1 个回答

  1. Best Answer

    最简单的选择是存储第一个创建的元素，例如在属性中root：

    let html = nestHTML('div', 111)('div', 222)('div', 333, 'moo')('div', 444);
test.appendChild(html.root);


function nestHTML(tag, textContent, className) {
  function nested(tag, textContent, className) {
    let elem = document.createElement(tag);

    elem.textContent = textContent || "";
    elem.className = className || "";

    if (nested.parent) {
      nested.parent.appendChild(elem);
      nested.parent = elem;
    } else {
      nested.parent = elem;
    }

    return nested;
  }
  nested.root = nested(tag, textContent, className).parent;
  return nested;
}
    section div {
  border: 2px solid orange;
  padding: 5px;
}

.moo {
  border-color: red;
}
    <section id="test"></section>

    • 2

相关问题