Javascript—用Javascript编写HTML代码的更简洁的方法（取代jQuery）

我正在努力从应用程序中删除所有jQuery代码，以代替纯Javascript。我一直在研究它，并做了一些很好的修改，但是代码本身似乎比jQuery多得多

我觉得有一种比我的方法更干净的方法来编写代码

下面是代码的摘录：

var aTestUl = document.createElement('ul');
var aTestLi = document.createElement('li');

var bTestBtn = document.createElement('a');
bTestBtn.className = "gc_bTest";
bTestBtn.id = "gc_bTest_" + aTestVarId;
bTestBtn.href = "#";
bTestBtn.dataset.body = aTestVarBody;
bTestBtn.innerHTML = "Call test function 1";

var bTestCTestDiv = document.createElement('span');
bTestCTestDiv.innerHTML = " - ";

var cTestBtn = document.createElement('a');
cTestBtn.className = "gc_cTest";
cTestBtn.id = "gc_cTest_" + aTestVarId;
cTestBtn.href = "#";
cTestBtn.dataset.body = aTestVarBody;
cTestBtn.innerHTML = "Call test function 2";

var aTestText = document.createTextNode(aTestVarId + ' - '
    + aTestVarBody + ' - ');

aTestLi.appendChild(aTestText);
aTestLi.appendChild(bTestBtn);
aTestLi.appendChild(bTestCTestDiv);
aTestLi.appendChild(cTestBtn);
aTestUl.appendChild(aTestLi);
document.getElementById('gc_aTest_list').appendChild(aTestUl);

这实际上创建了一个带有标题的列表： someId-someone-Function 1 href-Function 2 href。 还有一些代码没有包括其中附加了另一个ul和li。。。在aTestLi的末尾添加到ATESTL之前

这只是jQuery中的几行代码。有没有更简单的方法

作为细分，如果代码有点混乱，它会执行以下操作：

1. Create a master <ul> to append to the master <div>
2. Create a list <li> to append to the master <ul>
3. Create some text to put in the <li>
4. Create an <a> element (with attributes, such as id, class, ...)
5. Create another <a> element (with similar attributes)
6. Put the text, hyphens and the two <a> elements in the list
(<li>TEXT - <a /> - <a /></li>)
7. Attach the <li> to the master <ul>
(<ul><li>TEXT - <a /> - <a /></li></ul>)
8. Attach the master <ul> to the master <div>
(<div><ul><li>TEXT - <a /> - <a /></li></ul></div>)

这是代码在应用程序中经常做的事情，因此如果可以更简单一些，那就太好了

谢谢

编辑：由于某些要求，jQuery和其他外部库对此应用程序无效

编辑：要使用正确的术语，需要香草Javascript

编辑：HTML输出

<div class="gc_list" id="gc_profile_list">
    <ul>
        <li>
            ID9723 - AA00BB11CC2 - 
            <a class="gc_f_values" id="gc_f_values_ID9723" href="#" data-device="AA00BB11CC2">Get F Values</a>
            <span> - </span>
            <a class="gc_i_values" id="gc_i_values_ID9723" href="#" data-device="AA00BB11CC2">Get I Values</a>
            <ul>
                <li>Action: Save</li>
                <li>Action: Delete</li>
                <li>Action: Archive</li>
                <li>Action: Pass</li>
            </ul>
        </li>
    </ul>
</div>

这只是jQuery中的几行代码。有没有更简单的方法

使用纯JavaScript？不，JQuery的全部功能是它简化了这些东西，允许您“少写”以获得与纯JS相同的结果

我觉得有一种比我的方法更干净的方法来编写代码

---

如果不使用其他库或编写自己的库，就不会有JavaScript。首先，JavaScript是一种函数式语言。与任何函数式语言一样，以下规则适用

不要重复你自己 将函数视为值 喜欢表达胜过陈述 遵循上述规则，您将得到一个微jQuery-ish库。这就是米奇·卡拉约翰所说的。我做了一些小的重构，这样你就可以知道我要做什么了。生成的代码将更干净，更易于修改/重用

function CreateTestElement(element, options) {
    document.createElement(element);
    if (options) {
        element.className = options.className;
        element.id = options.className + "_" + options.id;
        element.href = options.href;
        element.dataset.body = options.body;
        element.innerHTML = options.innerHTML;
    }
    return element;
}

function CreateText(text){
    return document.createTextNode(text);
}

var bTestBtn = CreateElement('a', {
    className: "gc_bTest",
    id: aTestVarId,
    href: "#",
    body: aTestVarBody,
    innerHTML: "Call test function 1"
});

var bTestCTestDiv = CreateElement('span', {
    innerHTML: " - "
});

var cTestBtn = CreateElement('a', {
    className: "gc_cTest",
    id: aTestVarId,
    href: "#",
    body: aTestVarBody,
    innerHTML: "Call test function 2"
});

var aTestUl = CreateElement('ul')
                .appendChild(CreateElement('li'))
                .appendChild(CreateText(aTestVarId + ' - ' + aTestVarBody + ' - '))
                .appendChild(bTestBtn)
                .appendChild(bTestCTestDiv)
                .appendChild(cTestBtn);

document.getElementById('gc_aTest_list').appendChild(aTestUl);

---

为了代码的紧凑性（虽然不一定可读），有时只生成HTML字符串，然后让.innerHTML的赋值为您创建大多数DOM节点，会生成更小的代码

如果您有重复的HTML，那么您可以将重复部分的生成放在一个函数中，并使用不同的参数多次调用它。以下是您这样做的示例：

var aTestUl = document.createElement('ul');
var aTestLi = document.createElement('li');
var actions = "<ul><li>Action: Save</li><li>Action: Delete</li><li>Action: Archive</li><li>Action: Pass</li></ul>";

function createButton(cls, id, body, msg) {
    return '<a href="#" class="' cls + '" id="' + id +
           '" data-body="' + body + '">' + msg + '</a>';
}

var liHTML = aTestVarId + ' - ' + aTestVarBody + ' - ' +
  createButton("gc_bTest", "gc_bTest_" + aTestVarId, aTestVarBody, "Call test function 1") +
  '<span> - </span>' +
  createButton("gc_cTest", "gc_cTest_" + aTestVarId, aTestVarBody, "Call test function 2") + 
  actions;

aTestLi.innerHTML = liHTML;
aTestUl.appendChild(aTestLi);
document.getElementById('gc_aTest_list').appendChild(aTestUl);

---

仅供参考，如果您运行的环境支持ES6模板字符串中的文本替换，这种类型的文本操作将非常有用。

什么是aTestVarId和aTestVarBody？本质上，当您检查代码时，您会看到您正在重复一些步骤，例如，创建元素和设置一些属性。因此，您可以选择将该功能提取到单独的函数中，并对其他重复代码执行相同的操作，例如，将子元素列表附加到元素中……但代码本身似乎比jQuery“更多”……是的，这正是jQuery的要点——通过提供设计精美的API简化DOM操作。如果您想保持简单性而不依赖jQuery，那么最终可能会构建自己的DOM库？jQuery的口号是少写，多做，所以它看起来更像这样并不奇怪。无论如何，这个问题对于堆栈溢出来说可能有点太多的基于观点的问题。这里肯定需要清理。我建议先这样做，如果可能的话，我会担心以后的移植。不过，我不确定将此移到代码检查是不是一个好主意，它看起来像示例代码，我们不这样做。@Ivar在我们部署应用程序的地方，jQuery不能用于客户机的要求，等等当然有一种编写更干净的方法，您提取重复某些操作的代码是的，当然，但我不认为OP的问题是关于循环和函数的。@Icepickle我确实考虑过这样做，并计划创建一个公共函数来调用我可以这样做的地方。但即使我这样做，我仍然会有一个版本的上述代码在那里。我知道jQuery是为了缩短Javascript，这样您就不必编写一行又一行的代码，但上面的内容似乎比我预期的要多一些jQuery也有相当大的容量-在添加一个大型库的同时需要考虑几行代码。这就是说，从头开始创建DOM元素是vanilla js最糟糕的事情之一。我只是想说清楚，我并不提倡jQuery或其他东西@Gary只是问他是否能够将他的普通JS代码压缩到类似于jQuery代码的大小，做同样的事情至少我是这样解释这个问题的，答案是“不”。当然jQuery有开销，当然他可以做循环和函数，但他仍然需要写这些东西，

---

而jQuery为他提供了一个现成的API，这看起来比我所拥有的要整洁得多，更重要的是，它很容易理解所发生的事情。我肯定会这样做，而不是我的方法，就像你说的，在任何代码中重复你自己都是没有好处的。也许一个变化是选项是动态处理的，例如：对于选项{element[prop]=options[prop]}中的var prop，它可以使元素的创建更加动态？这同样好。我没有这样做的唯一原因是因为dataset属性。这样做将删除数据集的其他属性。通常我会编写一个扩展方法，对对象项目进行深度赋值，然后使用ObjectOptions扩展元素。实际上，不是创建每个元素和节点，而是将其定义为字符串变量，然后将其分配到innerHTML？@Gary-是的，这是一个快捷方式。您可以让浏览器直接从生成的HTML为您创建所有子节点。