您可以添加和删除部分标记吗？基础HTML

Question

我试图创建一个动态的“部分选项卡”的基础上，用户登录。作为“客人”，他们得到了前两个部分。如果以'user 1‘的身份登录，get部分1,2,3,5和'user 2’得到1,2,4,5。HTML如下所示：

<div class="large-9 push-3 columns">
<div class="section-container tabs" data-section="tabs">
    <section class="section">
        <p class="title"><a href="#">Section 1</a></p>
        <div class="content">
            <p>Content of section 1.</p>
        </div>
    </section>
    <section class="section">
        <p class="title"><a href="#">Section 2</a></p>
        <div class="content">
            <p>Content of section 2.</p>
        </div>
    </section>
    <section id="chicagoSection" class="section" style="display: none">
        <p class="title"><a href="#">Chicago</a></p>
        <div class="content">
            <p>Content of section 3.</p>
        </div>
    </section>
    <section id="detroitSection" class="section" style="display: none">
        <p class="title"><a href="#">Detroit</a></p>
        <div class="content">
            <p>Content of section 4.</p>
        </div>
    </section>
    <section id="userInfo" class="section" style="display: none">
        <p class="title"><a href="#">RSVP</a></p>
        <div class="content">
            <p>Content of section 5.</p>
        </div>
    </section>
</div>
</div>

和我的javascipt：

if (userOne) 
    {
        document.getElementById("chicagoSection").style.display="block";
        document.getElementById("userInfo").style.display="block";
    }
if (userTwo) 
    {
        document.getElementById("detroitSection").style.display="block";
        document.getElementById("userInfo").style.display="block";
    }

执行代码时，节选项卡一个接一个地放在一起。有没有一种动态的方法来做我想做的事情，或者我必须固定位置？另一种选择是将整个部分包装在div中并将其隐藏，或者根据用户显示它，但复制该HTML对我来说太麻烦了。

我使用的是Foundation 4 css及其固有的javascript。对于添加的信息，无需设置“display-none”，这些部分就可以了。

提前感谢！

解决方案：

    var section = document.createElement('section');
    var title = "Section " + count;
    var content = "Content of new section."

    section.className = "section";
    section.innerHTML ='<p class="title" style="left: ' + (count - 1) * 86 + 'px;"><a href="#">' + title + '</a></p><div class="content"><p>' + content + '</p></div>';
    count += 1;
    document.getElementById('sectionContainer').appendChild(section);

我找到了这个资源http://pastebin.com/QBMEJ2pq，并根据我的目的对其进行了调整。86常量是在我的css中定义的。我知道很可能有一种“合适”的方法来做到这一点(即创建所有元素并嵌套它们)，但不幸的是我找不到资源。如果有人能发布如何更好地创建innerHTML，我将不胜感激。

Answer 1

解决方案：

var section = document.createElement('section');
var title = "Section " + count;
var content = "Content of new section."

section.className = "section";
section.innerHTML ='<p class="title" style="left: ' + (count - 1) * 86 + 'px;"><a href="#">' + title + '</a></p><div class="content"><p>' + content + '</p></div>';
count += 1;
document.getElementById('sectionContainer').appendChild(section);

我找到了这个资源http://pastebin.com/QBMEJ2pq，并根据我的目的对其进行了调整。