鱼C论坛

 找回密码
 立即注册
查看: 3344|回复: 7

[已解决]求怎么在textnode换行

[复制链接]
发表于 2020-10-22 01:54:43 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
我想要用append()方法添加一串字符串在某个元素的末尾,该怎么换行呢?
最佳答案
2023-7-21 08:34:58
Darth_EF 发表于 2020-11-22 23:56
html有两种节点,一种是textnode,一种是element。html的换行符号是一个element。

我希望要在textnode ...

可以在字符串中使用 \n 来添加换行:

  1. // 目标元素
  2. const element = document.getElementById('element');

  3. // 要添加的字符串
  4. const str = '第一行\n第二行\n第三行';

  5. element.append(str);
复制代码

在字符串里用 \n 就可以实现换行。

另外,也可以用模板字符串,用反引号分割字符串,然后直接换行:

  1. const str = `第一行
  2. 第二行
  3. 第三行`;

  4. element.append(str);
复制代码

模板字符串就可以直接换行,不需要写 \n。

还可以通过 append() 追加 DOM 元素来实现换行效果:

  1. const line1 = document.createElement('div');
  2. line1.textContent = '第一行';

  3. const line2 = document.createElement('div');
  4. line2.textContent = '第二行';

  5. element.append(line1);
  6. element.append(line2);
复制代码

以上都是实现追加换行的方法。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-11-21 13:46:22 | 显示全部楼层
\r \n   
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-11-21 19:29:13 | 显示全部楼层

你在这个页面试试看。document.getElementById("postmessage_5109200").append("123\r\n321");
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-11-22 09:15:30 | 显示全部楼层
textnode换行是什么意思?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-11-22 23:56:10 | 显示全部楼层
不二如是 发表于 2020-11-22 09:15
textnode换行是什么意思?

html有两种节点,一种是textnode,一种是element。html的换行符号<br/>是一个element。

我希望要在textnode里换行并且在append或before方法时让它换行,而不是添加一个Text之后又加一个HTMLBRElement再加Text。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-21 08:34:58 | 显示全部楼层    本楼为最佳答案   
Darth_EF 发表于 2020-11-22 23:56
html有两种节点,一种是textnode,一种是element。html的换行符号是一个element。

我希望要在textnode ...

可以在字符串中使用 \n 来添加换行:

  1. // 目标元素
  2. const element = document.getElementById('element');

  3. // 要添加的字符串
  4. const str = '第一行\n第二行\n第三行';

  5. element.append(str);
复制代码

在字符串里用 \n 就可以实现换行。

另外,也可以用模板字符串,用反引号分割字符串,然后直接换行:

  1. const str = `第一行
  2. 第二行
  3. 第三行`;

  4. element.append(str);
复制代码

模板字符串就可以直接换行,不需要写 \n。

还可以通过 append() 追加 DOM 元素来实现换行效果:

  1. const line1 = document.createElement('div');
  2. line1.textContent = '第一行';

  3. const line2 = document.createElement('div');
  4. line2.textContent = '第二行';

  5. element.append(line1);
  6. element.append(line2);
复制代码

以上都是实现追加换行的方法。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-21 14:42:34 | 显示全部楼层
不二如是 发表于 2023-7-21 08:34
可以在字符串中使用 \n 来添加换行:


你也不择手段了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-19 01:48

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表