使用 JavaScript 生成带 id 的 span答案

【问题标题】：Generate spans with ids using JavaScript使用 JavaScript 生成带 id 的 span
【发布时间】：2015-07-04 09:55:33
【问题描述】：

我有以下代码可以创建带有一些输入字段的新跨度：

function add_course() {
     var newspan = document.createElement('span');
     newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
     document.getElementById('degree_course').appendChild(newspan); 
}

function add_skill() {
     var newspan = document.createElement('span');
     newspan.innerHTML = 'Skill: <input type="text" name = "skill[]"> Level: <input type="number"min ="1" max = "5" name = "level[]">';
     document.getElementById('skills').appendChild(newspan); 
}

我希望这些跨度每个都有不同的 id。例如，在 add_course 的情况下，如果生成 3 个跨度，我希望它们具有如下 id：course_1、course_2、course_3（技能案例中的技能_1、技能_2、技能_3）。

我知道我必须将 and id="course_VAR" 放入 innerHTML 并创建一个我每次都会增加的 var。（不会有 for 循环，因为当我点击特定按钮时该功能会触发。

<input class="buttons" type="button" id="more_fields" onclick="add_course();" value="Add Course" />

我的问题是，如何在没有 for 循环的情况下获取 id 中的 var 并使其增加？

【问题讨论】：

只需使用一个全局变量（或一个可从两个函数访问的变量）并在每次调用其中一个函数时递增它。
已经在这里回答了：stackoverflow.com/questions/10126395/…

标签： javascript html onclick

【解决方案1】：

将您的 var 放在函数范围之外并在内部递增。

var idCounter = 0;

function add_course() {
  var newspan = document.createElement('span');
  newspan.id = 'course_' + idCounter++;
  newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
  document.getElementById('degree_course').appendChild(newspan)
}

【讨论】：

这会将 id 添加到跨度内的输入中......有没有办法让跨度本身具有 id？谢谢:)
@ipg24 添加了我的答案，这正是:)
@ipg24 现在 span 本身有一个 id。

【解决方案2】：

你需要做的是添加一个计数器，然后使用setAttribute

var counter = 0;

function add_course() {
    var newspan = document.createElement('span');
    newspan.setAttribute('id', "course_"+counter);
    newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
    document.getElementById('degree_course').appendChild(newspan);
    counter += 1;
}

【讨论】：

@ipg24 如果这对你有帮助，你可以点击我的答案旁边的复选标记 :)

【解决方案3】：

正如其他一些答案中所建议的那样，使用全局或外部范围变量来跟踪它本身并没有错。但作为替代方案，如果您想保持“整洁”，您可以这样做：

var getIdFactory = function(pref) {
    return {
        counter: 0,
        prefix: pref,
        next: function() {
          this.counter++;
          return this.prefix+'_'+this.counter;
        }
    }
}

var courseId = getIdFactory('course');
var skillId = getIdFactory('skill');

然后，当您需要新的 div ID 时，请致电（例如）courseId.next()。

function add_course() {
    var newspan = document.createElement('span');
    newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
    newspan.setAttribute('id', courseId.next());
    document.getElementById('degree_course').appendChild(newspan);
}

在您的示例中，这可能是矫枉过正。但是这里的优点之一是您的 id 生成逻辑可以根据需要变得复杂，因为它是独立的。

JSfiddle here.

【讨论】：