javascript - 如何将两个块元素附加到一个div？

Question

不知道我做错了什么。我知道<p>并且<h1>是块元素，但即使display: inline-block;没有任何反应。H1 仍然会覆盖 P 标签。我究竟做错了什么？我尝试了多种方法，我相信它真的很简单。

代码如下。

  let newContent = document.createElement('div');
    newContent.classList.add('new');
    let mewOne = document.createElement('h1'); 
    newContent.style.cssText = 'border-color: black; background-color:pink;';



 mewOne.textContent ="hey, i'm in a div";
    let mewTwo = document.createElement('p');
    mewTwo.textContent ="me too";
    container.appendChild(mewOne, mewTwo);

full code ------
Html 



 


JS 

    const container = document.querySelector('#container');
    const content = document.createElement('div');
    content.classList.add('content');
    content.textContent = 'My first dom manipulation!';
    container.appendChild(content);
    //first//
    
    
    let newContent = document.createElement('div');
    newContent.classList.add('new');
    let mewOne = document.createElement('h1'); 
    newContent.style.cssText = 'border-color: black; background-color:pink;';
    
    mewOne.textContent ="hey, i'm in a div";
    let mewTwo = document.createElement('p');
    mewTwo.textContent ="me too";
    container.appendChild(mewOne, mewTwo);
    
    
    
    
    
    
    
    //second//
    
    const contentHeading = document.createElement('h3');
    contentHeading.classList.add('new');
    contentHeading.textContent = "i'm blue h3!";
    contentHeading.style.color = 'blue';
    container.appendChild(contentHeading);
    //third///
    const contentParagraph = document.createElement('p');
    contentParagraph.classList.add('new');
    contentParagraph.textContent ="Hey i'm red";
    contentParagraph.style.color = 'red';
    container.appendChild(contentParagraph);
    //fourth//

标签： javascripthtmlcss