javascript - insertHTML 与隐藏元素

Question

我需要确认!

我正在尝试将一个元素的内容交换到另一个包含 HTML 标签的元素。我很确定我在声明下面的代码应该有效时是正确的。我需要知道我是否正确，因为如果这不起作用的原因是我认为的那样，我需要创建一些附加功能。

请确认这是正确还是错误:

function subNavContent ( ) {  

    var navContent = document.getElementsByClassName( 'pageNav' ).innerHTML;

    document.getElementById( 'subNav' ).innerHTML = navContent;}

调用来源:

<div class="pageNav">
    <h1 data-title="Welcome to The Mind Company"><a>Welcome</a></h1>
</div>

发送至:

    <nav id="subNav" class="aniSubNavOpen drop-shadow lifted">
    </nav>

Answer 1

当你执行这两行时:

var navSub = document.getElementById( 'subNav' ).innerHTML;
var navContent = document.getElementsByClassName( 'pageNav' )[0].innerHTML;

您将从这两个对象获取 HTML 文本并将其存储在两个变量中。您现在有两个常规 JavaScript 变量，每个变量中都有一个字符串。

当你这样做时:

navSub = navContent;

您只需将 navContent 字符串分配给 navSub javascript 变量。它不会以任何方式影响 DOM。这些只是两个字符串变量。

如果你想改变 DOM 中 navSub 对象的内容，你可以这样做:

var navSubObj = document.getElementById( 'subNav' );
var navContent = document.getElementsByClassName( 'pageNav' )[0].innerHTML;
navSubObj.innerHTML = navContent;

另外，请注意，我必须更改此设置:

var navContent = document.getElementsByClassName( 'pageNav' ).innerHTML;

对此:

var navContent = document.getElementsByClassName( 'pageNav' )[0].innerHTML;

因为 getElementsByClassName() 返回一个数组，而不是一个对象(因为它可以返回多个项目)。在这一点上，它与 getElementById() 不同，因为 getElementById() 仅返回一个对象。