我正在学习CSS，但是无法使用附加按钮上的Flexbox和CSS Grid获得所需的布局。
我同时练习Flexbox和CSS Grid。问题是，如果HTML文档已包含按钮标签，则CSS可以正常工作。但是CSS无法使用Javascript / dom在附加到li标签的按钮上工作。 Flexbox和CSS网格都发生相同的问题。
// original HTML file used
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul class="list">
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
我想要得到的结果是li项末尾的删除按钮（类似于前两个项，笔记本和果冻），因此在右边都有理由。列表中输入的任何新项目也不会按预期显示。请查看下面的链接。任何评论表示赞赏。
https://jsbin.com/febulokoru/edit?html,css,output
EDIT1: took a look at console again, realised the button was being appended to the textContent(inside the closing li tag). How do I move it out of li and append it after closing li tag?
嵌套网格可用于解决布局问题。代替appendChild，请使用insertAdjacentElement方法，以便按钮不在li标记