Question

我是否可以使用变量来引用和修改querySelector？我试了几次，但还没有解决。

这是我的代码中的一个示例：

var detailPanelTitle = document.querySelector('span[class^="title-"]');

if (detailPanelTitle !== null) {    
  var detailPanelTitleText = detailPanelTitle.innerHTML;
  // Modify my title
  document.querySelector('span[class^="title-"]').innerHTML = detailPanelTitleText + ": this is my title";
}

这就是我想做的：

var detailPanelTitle = document.querySelector('span[class^="title-"]');

if (detailPanelTitle !== null) {    
  var detailPanelTitleText = detailPanelTitle.innerHTML;
  // Modify my title
  detailPanelTitleText = detailPanelTitleText + ": this is my title";
}

是否有一种方法可以指向带有变量的innerHTML对象并在以后进行编辑？

感谢您的帮助！

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-md">
                <div class="row">
                    <div class="col-md-12 col-lg-8">
                        <div class="container">
                            <div class="text-left">
                                Some text on the left
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-4">
                        <div class="sticky-card">
                            Some content here
                        </div>
                    </div>
                </div>                
       </div>

示例中的问题是，您正在设置局部变量detailPanelTitle.innerHTML += ": this is my title";的值，而不是重用detailPanelTitleText并将其设置为字段detailPanelTitle。

innerHTML

Answer 2

我认为您必须将对象与文本区分开来。

var detailPanelTitleObj = document.querySelector('span[class^="title-"]');

if (detailPanelTitleObj !== null) {    
  var detailPanelTitleText = detailPanelTitleObj.innerText;
  // Modify my title
  detailPanelTitleObj.innerText = detailPanelTitleText + ": this is my title";
}

使用变量引用和修改querySelector

2 个答案: