Javascript 同一行中的两个字符串

我有两个字符串，希望它们在同一行

.JS文件示例：

var block1 = document.createElement('div');

var title_1 = document.createElement('h3');
var title = document.createElement('a');
title.textContent = "This is test1";
title.setAttribute("role", "button");
title.href = '';
title.onclick = function () {
  var url = 'https://test.com';
  window.open(url, '_blank');
  }
title_outer.append(title);
block1.appendChild(title_1);

var title_2 = document.createElement('h3');
title_2.textContent = "This is test2";
block1.appendChild(title_2);

输出为：

这是test1
这是test2

我想要的输出：

这是测试1这是测试2

---

输出应该在同一行。

为什么不在已创建的元素上附加新值，而不是创建新元素

从更改代码

var title_2 = document.createElement('h3');
title_2.textContent = "This is test2";
block1.appendChild(title_2);

到

---

这有帮助吗？

与其创建新元素，为什么不向已创建的元素添加新值呢

从更改代码

var title_2 = document.createElement('h3');
title_2.textContent = "This is test2";
block1.appendChild(title_2);

到

---

这有帮助吗？

您添加了两个通常进入不同块的

h3

元素。您必须将第二个标题附加到当前文本内容

改变这个

var title_2=document.createElement（'h3'）；
title_2.textContent=“这是test2”；
区块1.附加子项（标题2）；

对此

title.textContent=title.textContent+“这是test2”；

您添加了两个

h3

元素，它们通常会进入不同的块中。您必须将第二个标题附加到当前文本内容

改变这个

var title_2=document.createElement（'h3'）；
title_2.textContent=“这是test2”；
区块1.附加子项（标题2）；

对此

title.textContent=title.textContent+“这是test2”；
可能是CSS的问题。您的
h3
标签可能有
显示：块属性。将标签
a
和
h3
更改为
span
，查看两个文本是否在一行中

如果更改为
span
有效，则必须调整CSS，使两个标记都具有
显示：内联块
可能是CSS的问题。您的
h3
标签可能有
显示：块属性。将标签
a
和
h3
更改为
span
，查看两个文本是否在一行中

如果更改为
span
有效，则必须调整CSS，使两个标记都具有
显示：内联块
元素将
h3
块
作为默认css
显示
属性值。这会使它们在默认情况下为全宽（因此，它们后面的任何元素都会在视觉上“推”到“新行”）。如果确实希望
h3
元素彼此相邻显示（这是非常不正常的），可以将它们的
display
值设置为
inline
或
inline block
。您可以使用javascript这样做：

var title_1 = document.createElement('h3');  
title_1.style.display = "inline-block";  // or "inline"

或者，显示相邻文本的更好实践是使用默认情况下具有“非块”显示的元素。最简单的例子是
span
元素

如果您希望有一个
h3
元素和两个文本，其中第一个文本也起到链接的作用，我建议针对此结构，而不是有两个
h3
元素：

<h3>
  <a> First Text </a>
  <span> Second Text </span>
</h3>


第一个文本
第二文本

这样，您就不必调整css。
h3
元素将
块
作为默认css
显示
属性值。这会使它们在默认情况下为全宽（因此，它们后面的任何元素都会在视觉上“推”到“新行”）。如果确实希望
h3
元素彼此相邻显示（这是非常不正常的），可以将它们的
display
值设置为
inline
或
inline block
。您可以使用javascript这样做：

var title_1 = document.createElement('h3');  
title_1.style.display = "inline-block";  // or "inline"

或者，显示相邻文本的更好实践是使用默认情况下具有“非块”显示的元素。最简单的例子是
span
元素

如果您希望有一个
h3
元素和两个文本，其中第一个文本也起到链接的作用，我建议针对此结构，而不是有两个
h3
元素：

<h3>
  <a> First Text </a>
  <span> Second Text </span>
</h3>


第一个文本
第二文本

这样，您就不必调整css。
但是第一个文本内容的超链接也将位于第二个文本内容上。我只想要标题1的href，而不是标题2的href。这就是为什么会有两个不同的块。但是第一个文本内容的超链接也会在第二个文本内容上。我只想要标题1的href，而不是标题2的href。这就是为什么会有两个不同的块。但是第一个文本内容的超链接也会在第二个文本内容上。我只想要标题1的href，而不是标题2的href。这就是为什么两个不同的街区。我知道我不明白问题的那部分。然后尝试css方法：）但是第一个文本内容的超链接也将位于第二个文本内容上。我只想要标题1的href，而不是标题2的href。这就是为什么两个不同的街区。我知道我不明白问题的那部分。然后尝试css方法：）这是可行的，但是内联块在输出上下元素之间创建了不均匀的间距。是否有一种CSS方式可以使用display:inline并具有相等的间距？另外，既然两个文本内容在同一行中，我怎么能在它们之间留有空间呢？我可以这样做吗？这是test1（这是test2）？现在你知道，你的JS代码很好，CSS需要tweek。将父级
div
设置为具有属性
display:flex；对齐项目：居中
。这就是flexbox的方法。这是可行的，但是内联块在输出上下元素之间产生了不均匀的间距。是否有一种CSS方式可以使用display:inline并具有相等的间距？另外，既然两个文本内容在同一行中，我怎么能在它们之间留有空间呢？我可以这样做吗？这是test1（这是test2）？现在你知道，你的JS代码很好，CSS需要tweek。将父级
div
设置为具有属性
display:flex；艾尔