js动态生成的控件渲染未完成无法赋值怎么办

JavaScript09

js动态生成的控件渲染未完成无法赋值怎么办,第1张

1、强制刷新：当你检查问代码逻辑没有问题的时候，你首先可以在赋值之后强制刷新渲染页面一下，这种时候一般都是多层嵌套或者多层遍历导致的，这种方法只能在当前页面内起作用，如果你是给子组件赋值，就不行。

2、重新销毁创建：如果只改变了子组件的数据，但是子组件没有重新渲染，那么可以重新创建一下这个子组件，其实也就是v-if一下。

以点击按钮，改变按钮元素的内容为案例，点击的时候 ”按钮“ 变为 ”hello“

1、通过js获取元素，例如，获取元素btn按钮

2、通过js，当点击按钮的时候，改变原来的值为“hello”

3、运行效果如下：

4、点击按钮之后的效果：

完整的html代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

.wrap{

width:400px

height:300px

background:#000

position:relative

}

a.btn1{

display:block

width:140px

height:40px

line-height:40px

text-align:center

background:#ff0099

color:#fff

position:absolute

left:100px

top:100px

}

  </style>

 </head>

 <body>

  

<div class="wrap">

<a href="javascript:" class="btn1" id="btn">按钮</a>

</div>

<script type="text/javascript">

var oBtn= document.getElementById("btn")

oBtn.onclick=function(){

oBtn.innerHTML="hello"

}

</script>

 </body>

</html>