如何动态更改动态div的div文本
[英]How to dynamically change div text of a dynamic div
问题描述
Apologies for asking something already answered. 
道歉的问题已经回答。 I have tried to resolve this but i am unable to get this working(Might be because i am not a javascript guy and it confuses me.) 我已尝试解决此问题，但无法正常工作（可能是因为我不是一名JavaScript专家，这使我感到困惑。）
I want to change text of a div which is generated dynamically from a js library that i am using for show error messages. 我想更改div的文本，该文本是从我用于显示错误消息的js库动态生成的。
I have tried to change the element using jQuery by its class like 我试图通过jQuery的类来更改元素，例如
$('document').ready(function () {
$('.error-message')[item_number].innerText.replace('old string','new string');
}
I have tried checking if the element is undefined and put a condition for that and also tried to use simple javascript. 我尝试检查元素是否未定义，并为此设置条件，还尝试使用简单的javascript。 But i think the problem is not that, but that the function is not running dynamically and changing the values on the fly as this works in js console. 但是我认为问题不在于此，而是该函数没有动态运行并且在js控制台中可以实时更改值。
I would appreciate if someone answers what i need to learn and use for this. 如果有人回答我需要学习和使用的内容，我将不胜感激。 I don't think this needs ajax and i should be able to do this via pure js or jquery. 我认为这不需要ajax，我应该能够通过纯js或jquery做到这一点。 But please let me know if i need the delve deeper into ajax to handle this. 但是请让我知道我是否需要深入研究Ajax来解决这个问题。
Please note that i am able to change the text in js console as i want. 请注意，我可以根据需要在js控制台中更改文本。 Its just the i am unable to handle this on the fly as the div which i am trying to change is also generated on the fly. 它只是我无法即时处理此问题，因为我要更改的div也会即时生成。
3 个解决方案
解决方案1
1 2017-06-07 17:59:30
Since you are using jQuery - this should work for you. 由于您使用的是jQuery-这应该适合您。
$('document').ready(function () {
$('.error-message')[item_number].text('new string');
}
解决方案2
0 2017-06-07 18:01:40
原始的js代码为：
document.getElementsByClassName("error-message")[item_number].innerHTML = "something else here"
解决方案3
0 2017-06-07 18:39:12
Solution 解
$(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}
<!DOCTYPE html> <html> <body> <div id='buttons'> <button class='add_div'>Add Div</button> <button class='update_text'>Update text of last created div</button> </div> <div class='div_container'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.