如何动态更改动态div的div文本

时间:2017-06-07 17:57:32

标签: javascript jquery html

对于已经回答的问题抱歉。我试图解决这个问题,但我无法解决这个问题(可能是因为我不是一个javascript的人,它让我困惑。)

我想更改从我用于显示错误消息的js库动态生成的div的文本。

我尝试使用jQuery按类

更改元素
$('document').ready(function () {
    $('.error-message')[item_number].innerText.replace('old string','new string');
}

我已经尝试检查元素是否未定义并为其设置条件并尝试使用简单的javascript。但我认为问题不是那个,而是该函数没有动态运行并且动态更改值,因为这在js控制台中有效。

如果有人回答我需要学习和使用的内容,我将不胜感激。我不认为这需要ajax,我应该能够通过纯js​​或jquery来做到这一点。但是如果我需要深入研究ajax来处理这个问题,请告诉我。

请注意,我可以根据需要更改js控制台中的文本。它只是我无法动态处理这个因为我试图改变的div也是在飞行中生成的。

3 个答案:

答案 0 :(得分:1)

因为你正在使用jQuery - 这应该适合你。

$('document').ready(function () {
    $('.error-message')[item_number].text('new string');
}

答案 1 :(得分:0)

vanilla js代码将是:

document.getElementsByClassName("error-message")[item_number].innerHTML = "something else here"

答案 2 :(得分:0)

解决方案

SELECT COUNT(ws.Work_shift)
FROM Working_schedule ws
     INNER JOIN Area_branch ab ON ab.Area_Branch_ID = ws.FK_Area_Branch_ID
     INNER JOIN regional_branch rb ON rb.regional_branch_id = ab.FK_regional_branch_id
     INNER JOIN Country c ON.c.country_location = rb.FK_country_location
                            AND c.Company_origin = 'Spain'
WHERE ws.Work_shift = 'night'
      AND ws.Work_grade = 'senior';
$(function()
{
  $('.add_div').click(function(event)
  {
    // Dynamically add div
    var $new_div = $('<div class="new_div"/>').text('default text');

    // Prepend so you don't have to scroll to see the div update
    $('.div_container').prepend($new_div);
    flash_first_div();
  });

  $('.update_text').click(function(event)
  {
    var date = new Date(),
        hour = date.getHours(),
        minutes = date.getMinutes(),
        seconds = date.getSeconds();

    // UPDATE LAST DYNAMICALLY CREATED DIV
    $('.new_div').first().text('text updated at ' + hour + ':' + minutes + ':' + seconds);
    flash_first_div();
  });
  
  // Just a helper function to highlight the targeted div
  function flash_first_div()
  {
    var $last_div = $('.new_div').first();
    
    $last_div.addClass('flash');

    window.setTimeout(function(){$last_div.removeClass('flash');},500);
  };
});
button{font-size:16px}
div{transition: background 1s;margin-bottom:10px}
.new_div{padding:0.5em;border:1px solid #000000}
.flash{background:yellow}