如何用JavaScript创建inline-block元素并将<a>链接插入到<p>段落内部末尾？

嘿，我懂你的困惑啦！其实你想要的效果完全可以实现，而且你提到的appendChild()方法就是正确的路子——只是可能在元素创建或样式设置的细节上没踩对节奏～

先给你理清楚核心逻辑：你要把<a>作为<p>的子元素加到它的内部末尾，而不是放在<p>的外面。appendChild()的作用就是把元素添加到目标元素的子节点列表的最后，所以只要你把<a>追加到<p>元素上，它自然就会出现在段落文本的末尾啦！

下面给你一套完整的实现步骤和代码：

1. 创建并配置<a>元素 #

首先用document.createElement()创建链接元素，然后设置它的链接地址、显示文本，还有你需要的inline-block样式：

// 创建<a>元素
const myLink = document.createElement('a');
// 设置链接地址
myLink.href = '你要跳转的目标地址';
// 设置链接显示的文本
myLink.textContent = '点击查看更多';
// 给链接设置inline-block样式
myLink.style.display = 'inline-block';
// 还可以加个小间距，让链接和段落文本不挤在一起
myLink.style.marginLeft = '8px';

2. 将链接插入到<p>内部末尾 #

接下来获取你目标的<p>元素，用appendChild()把刚才创建的链接加进去就行：

// 获取目标段落（记得给你的<p>加上id，比如"target-paragraph"）
const targetParagraph = document.getElementById('target-paragraph');
// 把链接插入到段落内部的最后位置
targetParagraph.appendChild(myLink);

关于你之前遇到的样式问题 #

你说设置display:inline-block没生效？大概率是这两个原因：

• 可能你没正确选中<a>元素就设置样式了，比如误给父元素或者其他元素加了样式；
• 页面里的CSS规则优先级比行内样式高，覆盖了你的设置。这种情况可以打开浏览器开发者工具，查看<a>元素的样式面板，看看是哪条CSS规则把display属性覆盖了，再针对性调整。

补充说明 #

你提到的insertBefore()是用来把元素插到某个指定子元素的前面，而appendChild()刚好就是你需要的“加到内部末尾”的方法，完全符合你的需求～

备注：内容来源于stack exchange，提问作者user25017272