Question

所以我有这个问题，我认为Javascript可以解决，因为我还在学习语言，这是另一个问题，所以我在这里寻求帮助。

我想将文本节点I would like to opt in to receive future communication from.包装在<span class="something"></span>。

中

我的计划是循环它，以便它将为元素

下的所有节点文本内容添加跨度

所以我编写了它，控制台显示错误Uncaught SyntaxError: Unexpected identifier

原始HTML

<tbody>
  <tr>
    <td>
      <label class="gotowebinar-required" for="577271555173">I would like to opt in to receive future communication from</label>
    </td>
  </tr>
</tbody>

所以我到达了这个看起来很可怕的代码，看起来似乎不起作用，而且是一个可变的怪人。

JS

function changeEl(){
  var r = document.getElementsByClassName('gotowebinar-required').length;
  for (var i = 0; i <= r; i++){
    console.log(r);
    var m = '[';
    var n = ']';
    var b =  m+i+n;
    var x = document.getElementsByClassName('gotowebinar-required')b;
    var w = document.getElementsByClassName('gotowebinar-required')b.innerHTML;
    var y = x.innerHTML;
    var p = '<span style="font-weight: bold;"class="label_1">';
    var q = '</span>';
   x.innerHTML = p+w+q;
  };
};
changeEl();

最后，我正在寻找的是

<tbody>
  <tr>
    <td>
      <label class="gotowebinar-required" for="577271555173">
        <span style="font-weight: bold;"class="label_1">I would like to opt in to receive future communication from.</span>
      </label>
    </td>
  </tr>
</tbody>

所有具有gotowebinar-required类的元素。

Answer 1

var m = '[';
var n = ']';
var b =  m+i+n;
var x = document.getElementsByClassName('gotowebinar-required')b;

你不能将JS代码放在变量中，然后把它粉碎到任何旧的地方。变量无法替代任意语法。

[和]之间的代码可以是表达式，但必须明确键入[和]：

var x = document.getElementsByClassName('gotowebinar-required')[i];

for (var i = 0; i <= r; i++){

你还需要循环，直到达到长度而不是经过它。 <=应为<。

Answer 2

你不能像使用'['和']'那样引用数组中的项目。如果你使用下面的[i]代码，你就可以了。

function changeEl(){
    var r = document.getElementsByClassName('gotowebinar-required').length;
    for (var i = 0; i < r; i++){
        console.log(r);
        var x = document.getElementsByClassName('gotowebinar-required')[i];
        var w = document.getElementsByClassName('gotowebinar-required')[i].innerHTML;
        var y = x.innerHTML;
        var p = '<span style="font-weight: bold;"class="label_1">';
        var q = '</span>';
        x.innerHTML = p+w+q;
    };
};
changeEl();

Answer 3

有很好的答案可以解释为什么你的代码不起作用。而不是添加到那里我想告诉你如何将它包装成一个漂亮的可重用方法。

const 
  defaultPlaceholder = '{{text}}';


/**
 * Wraps the inner HTML of elements matching the selector into another HTML structure.
 *
 * @param {String} selector    A valid CSS selector matching the items to change.
 * @param {String} template    A string representation of the HTML structure in which the 
 *                             innerHTML of the matched elements should be placed.
 * @param {String} placeholder The string inside the template which should be replaced by the 
 *                             innerHTML of a matched element. When no value is provided, this
 *                             will have replace "{{text}}".
 */
function wrapInnerHTML(selector, template, placeholder = defaultPlaceholder) {
  const
    // Find the elements in the DOM matching the selector and convert the NodeList to an array.
    elements = Array.from(document.querySelectorAll(selector));
   
  // Iterate over the elements
  elements.forEach(element => {
    const 
      // Create a new inner HTML string by replacing the placeholder in the template.
      newInnerHTML = template.replace(placeholder, element.innerHTML);
    // Replace the inner HTML of the element with the new content.
    element.innerHTML = newInnerHTML;
  });
}

wrapInnerHTML('.gotowebinar-required', '<label style="font-weight:bold" class="label_1">{{text}}</label>');

<table>
  <tbody>
    <tr>
      <td>
        <label class="gotowebinar-required" for="577271555173">I would like to opt in to receive future communication from</label>
      </td>
    </tr>
  </tbody>
</table>

Answer 4

var x = document.getElementsByClassName('gotowebinar-required')b;
var w = document.getElementsByClassName('gotowebinar-required')b.innerHTML;

为什么字母b在那里？如果删除b，则代码运行正常。

https://jsfiddle.net/L9zv2ycz/

另请请格式化您的代码：）

通过For循环更改文本节点但导致意外的标识符

4 个答案: