字符串转 html

王林

发布时间：2023-05-21 14:18:38

2440人浏览过

来源于php中文网

原创

在前端开发过程中，字符串经常被用来表示各种 html 标签，比如网页的标题、段落、链接等等。但是，当我们需要在 javascript 中动态生成网页时，需要将这些字符串转换成 html 代码。本文将介绍如何使用 javascript 技术实现字符串转 html。

使用 innerHTML 属性

将字符串转换为 HTML 的最简单方法是使用 innerHTML 属性。这个属性可用于将字符串作为 HTML 代码插入到元素中。例如，以下代码可以将一个标题元素的文本内容设置为字符串 "Hello World!"：

var title = document.createElement("h1");
title.innerHTML = "Hello World!";

我们也可以用相同的方式插入更复杂的 HTML 代码。例如，以下代码将创建一个包含段落、链接和图像的元素：

var container = document.createElement("div");
container.innerHTML = `
  This is an example of a paragraph.
  This is an example of a link.
  
`;

请注意，使用 innerHTML 属性需要谨慎，因为它可以使网页容易受到跨站点脚本（XSS）攻击。因此，我们应该始终对用户输入的数据进行严格的验证和过滤。

立即学习“前端免费学习笔记（深入）”；

使用 DOM 操作

除了 innerHTML 属性外，我们还可以使用 DOM（文档对象模型）操作手动创建和插入 HTML 元素。DOM 操作的优点是可以精确控制生成的 HTML 代码的结构和样式。

在 DOM 操作中，我们可以使用 createElement() 方法创建新的元素节点。例如，下面的代码将创建一个新的段落元素：

var paragraph = document.createElement("p");

然后，我们可以使用 setAttribute() 方法设置元素节点的属性，如下所示：

paragraph.setAttribute("class", "example");

接下来，我们可以使用 appendChild() 方法将新的元素节点添加到其他元素中。例如，下面的代码将创建一个新的 div 元素，并向其中添加两个段落元素：

var container = document.createElement("div");
var paragraph1 = document.createElement("p");
var paragraph2 = document.createElement("p");

paragraph1.innerHTML = "This is the first paragraph.";
paragraph2.innerHTML = "This is the second paragraph.";

container.appendChild(paragraph1);
container.appendChild(paragraph2);

如上所示，我们还可以使用 innerHTML 属性将字符串转换为 HTML，但是我们可以先使用手动创建和操作元素节点来掌握 DOM 操作的基本原理和技术。

佳蓝在线销售系统(创业版) 佳蓝在线销售

1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全

下载

使用模板字符串

ES6 新增了模板字符串（Template Strings），它是一种特殊类型的字符串，可以使用占位符插入变量，如下所示：

var name = "Alice";
var message = `Hello, ${name}!`;

在模板字符串中使用 HTML 标记，则可以将字符串转换成 HTML 代码。例如，以下代码将创建一个包含变量和静态文本的段落元素：

var name = "Alice";
var paragraph = `
  Hello, ${name}!
`;

我们可以使用模板字符串来动态地生成 HTML 内容，并使用 DOM 操作将其插入到网页中。例如，以下代码将创建一个包含图片和两个链接的 div 元素：

var imgSrc = "https://example.com/img.jpg";
var link1 = { text: "Link 1", url: "https://example.com/link1" };
var link2 = { text: "Link 2", url: "https://example.com/link2" };

var container = document.createElement("div");
container.innerHTML = `
  
  ${link1.text}
  ${link2.text}
`;