代码之家 › 专栏 › 技术社区 › DCR

在预标记之前插入

pre html javascript

-1

DCR · 技术社区 · 2 年前

我需要从javascript将一些文本插入到预标记中。我尝试了以下操作:

<!DOCTYPE html>
<html>

<body>
  
  <pre id='test'> some
text</pre>

  <script>
    // Create a "span" element:
    const newNode = document.createElement("span");
    // Create a text node:
    const textNode = document.createTextNode(" Water ");
    // Append text node to "span" element:
    newNode.appendChild(textNode);

    // Insert before existing child:
    const list = document.getElementById("test");
    list.insertBefore(newNode, list.children[0]);
  </script>

</body>

</html>

但我的输出是:

 some
text water

但我需要:

 water some
text

4 回复 | 直到 2 年前

Unmitigated 2 年前

您需要在之前插入 firstChild ,而不是第一个元素。

const newNode = document.createElement("span");
const textNode = document.createTextNode(" Water ");
newNode.appendChild(textNode);
const list = document.getElementById("test");
list.insertBefore(newNode, list.firstChild);

<pre id='test'> some
text</pre>

您可以使用来简化此过程 Element#prepend 。

const span = Object.assign(document.createElement('span'), {textContent: " Water "});
document.getElementById("test").prepend(span);

<pre-id=“测试”>一些
文本</pre>

DCR 2 年前

因此,您似乎需要使用innerText和模板文字:

start = document.getElementById("putItHere").innerText
document.getElementById("putItHere").innerText = `water ` + start

<pre id="putItHere">some
text
</pre>

XMehdi01 2 年前

使用 insertAdjacentHTML 带位置 afterbegin 它在的开头插入指定的HTML内容 pre 元素:

// Create a "span" element:
const newNode = document.createElement("span");
// Create a text node:
const textNode = document.createTextNode(" Water ");
// Append text node to "span" element:
newNode.appendChild(textNode);

// Insert at the beginning of the pre element:
const preElement = document.getElementById("test");
preElement.insertAdjacentHTML('afterbegin', newNode.outerHTML);

<pre id='test'> some
text</pre>

-1

Escape75 2 年前

这样的怎么样?

const list = document.getElementById("test");
list.parentNode.insertBefore(newNode, list);

https://jsfiddle.net/ptqby9rL/

是的,要进入预赛,你可以做:

const list = document.getElementById("test");
list.innerHTML = "<span> Water </span>" + list.innerHTML;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前