使用 JavaScript 生成带有 ID 的跨度

Question

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

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（skill_1, skill_2, skill_3 在技能案例中）。

我知道我必须在 innerHTML 中放入 id="course_VAR" 并创建一个我每次都会增加的变量。（不会有 for 圆圈，因为当我点击特定按钮时该函数会触发）。

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

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

Answer 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)
}

Answer 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;
}

Answer 3

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

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.

使用 JavaScript 生成带有 ID 的跨度

Generate spans with ids using JavaScript

html

javascript

onclick