将文本添加到动态创建的 DOM 元素答案

【问题标题】：Adding text to a dynamically created DOM element将文本添加到动态创建的 DOM 元素
【发布时间】：2018-01-21 04:06:56
【问题描述】：

我正在尝试使用子 <p> 元素创建 <div> 元素； <div> 元素被分配了一类“时钟”+一个数字（增量）。虽然元素本身似乎已创建，但向 <p> 元素添加文本（在我的情况下为 moment 对象）不起作用。

HTML：

<body>
      <select class="tz_list" name="timezones">
          <option value="default">Please Select a Timezone</option>
      </select>
      <input type="button" name="addClock" value="Add Clock" class="button">
</body>

JS：

$(document).ready(function () {
    var now = moment();
    console.log(now);
    //var repeat = setInterval(displayTime, 200);
    var tzones = moment.tz.names();
    tzones.forEach(function(key,value){
        $('<option/>').val(key).html(key).appendTo('.tz_list');
    });
    var repeat;
    var clock_count = 1;
    var timezone ="";


    function displayTime(timezone, clock_number) {
       console.log(timezone);
       var location = moment().tz(timezone).format("ddd, MMMM Do YYYY, HH:mm:ss");
       console.log(location);
       //$('.clock '+clock_number)[0].childNodes[0].nodeValue = timezone;
       var selector = '.clock '+clock_number.toString() + ' p';
       console.log(selector);
       //$('.clock '+clock_number.toString()).css({"height":"100px", "width":"500px"});
       $(selector).text(location.toString());
     };

    $('.button').on('click', function(e){
       console.log(e.target.value);
       var div = '<div class="clock '+clock_count.toString()+'"><p></p></div>';
       $(div).insertAfter('.button');
       clock_count+=1;
       displayTime(timezone, clock_count-1);

    });

    $('.tz_list').on('change', function(event){
        console.log(event.target.value);
        timezone = event.target.value;

    });

});

我错过了什么？这是JSFiddle

【问题讨论】：

我可以看到它正在工作，只是你的
没有文本，所以它接缝不起作用，但如果你检查源代码，你会发现 Div 元素添加正确。

标签： javascript jquery html momentjs

【解决方案1】：

改变这一行：

$('.clock.'+clock_number.toString()).text(timezone);

添加“。”在时钟之后但不是上帝练习添加数字作为类，而不是使用类似clock_1（或clock1，如下面的答案）

【讨论】：

【解决方案2】：

而不是创建类“时钟”尝试在不给空间的情况下创建。它会起作用的。

    function displayTime(timezone, clock_number) {
   console.log(timezone);
   var location = moment().tz(timezone).format("ddd, MMMM Do YYYY, HH:mm:ss");
   console.log(location);
   //$('.clock '+clock_number)[0].childNodes[0].nodeValue = timezone;
   var selector = '.clock'+clock_number.toString() + ' p';
   console.log(selector);
   //$('.clock'+clock_number.toString()).css({"height":"100px", "width":"500px"});
   $('.clock'+clock_number.toString()).text(timezone);
   $(selector).text(location.toString());
 };
$('.button').on('click', function(e){
   console.log(e.target.value);
   var div = '<div class="clock'+clock_count.toString()+'"><p></p></div>';
   $(div).insertAfter('.button');
   clock_count+=1;
   displayTime(timezone, clock_count-1);

});

【讨论】：