如何用JavaScript创建含元素的div并实现元素同行显示？

一、让Label和文本同行的核心问题与解决方法 #

你当前的代码有两个关键问题导致换行：

1. <p>是块级元素，默认会独占一行，这是换行的根本原因；
2. JS代码逻辑错误：把p元素嵌套进了label里（结构不符合需求），文本节点未挂载到对应元素，且appendChild('label_element')传的是字符串而非变量。

下面是两种可行的解决方法：

方案1：用<span>替代<p>（推荐） #

<span>是行内元素，默认会和同为行内元素的<label>在同一行显示，代码如下：

// 创建外层容器div
const container = document.createElement('div');

// 创建label和文本容器span
const labelElement = document.createElement('label');
const textElement = document.createElement('span');

// 给元素添加文本内容
labelElement.appendChild(document.createTextNode('Label:'));
textElement.appendChild(document.createTextNode('This text should be right beside the label'));

// 将label和span放入容器
container.appendChild(labelElement);
container.appendChild(textElement);

// 挂载到页面指定锚点
document.getElementById('anchor').appendChild(container);

方案2：给<p>设置CSS改为行内元素 #

如果一定要保留<p>标签，只需修改它的display属性，让它不再独占一行：

const container = document.createElement('div');

const labelElement = document.createElement('label');
const pElement = document.createElement('p');

labelElement.appendChild(document.createTextNode('Label:'));
pElement.appendChild(document.createTextNode('This text should be right beside the label'));

// 修改p的display属性为行内块或行内
pElement.style.display = 'inline-block'; // 也可使用 'inline'

container.appendChild(labelElement);
container.appendChild(pElement);

document.getElementById('anchor').appendChild(container);

二、在Label旁添加输入框的处理 #

<input>属于行内块元素，默认会和<label>同行显示，同时可以通过两种方式实现label与输入框的关联（点击label时自动聚焦输入框）：

方法1：用for与id属性关联（语义化推荐） #

const container = document.createElement('div');

const labelElement = document.createElement('label');
const inputElement = document.createElement('input');

// 设置label的for属性和input的id属性，实现关联
labelElement.setAttribute('for', 'user-input');
inputElement.setAttribute('id', 'user-input');
inputElement.setAttribute('type', 'text');

labelElement.appendChild(document.createTextNode('请输入内容:'));

container.appendChild(labelElement);
container.appendChild(inputElement);

document.getElementById('anchor').appendChild(container);

方法2：将输入框直接嵌套进Label内部 #

这种方式无需额外设置属性，结构更简洁：

const container = document.createElement('div');

const labelElement = document.createElement('label');
const inputElement = document.createElement('input');
inputElement.setAttribute('type', 'text');

// 将文本和输入框都放入label中
labelElement.appendChild(document.createTextNode('请输入内容:'));
labelElement.appendChild(inputElement);

container.appendChild(labelElement);

document.getElementById('anchor').appendChild(container);

内容的提问来源于stack exchange，提问作者YEETMESOMEYEEZY