vue+elementUI使用JQuery的append方式追加dom

在一次自己做的项目里面要求，后端传回markdown格式的文本，前端需要展示，并且可以点击图片实现打图预览并切换图片。

解析markdown文本使用的框架是Editor.md

Editor.md官网
Editor.md GitHub

目前很多解析markdown的框架渲染出来的图片都是原生的img标签，但是我需要能实现大图预览的效果，正好ElementUI有El-Image组件可以帮助我完成这个功能。

我尝试着该他的源码，但是他是直接把标签输出到页面上的，不能经过Vue的解析再渲染。所以我就只能通过正则表达式将markdown文本按照特定规则分割，将包含图片的部分与其他部分分离开来，让markdown解析器只负责解析除了图片之外的文本，图片则由我自己通过JQuery的append方式追加，因为图片位置不是全部固定在页面某一个位置的，而是穿插在各个段落之间，所以不能用v-for的方式，只能用JQuery的append方式。若要使用append方式，需要了解使用vue的render函数，render函数有一个参数createElement，该参数本身也是一个函数，它具有三个参数，分别是：

1. // {String | Object | Function}
   // 一个 HTML 标签字符串，组件选项对象，或者
   // 解析上述任何一种的一个 async 异步函数，必要参数。
   ‘div’,
2. // {Object}
   // 一个包含模板相关属性的数据对象
   // 这样，您可以在 template 中使用这些属性。可选参数。
   {
   },
3. // {String | Array}
   // 子节点 (VNodes)，由 createElement() 构建而成，
   // 或使用字符串来生成“文本节点”。可选参数。

了解了render函数之后就可以追加元素了，关键代码如下

let component = Vue.extend({
	render(createElement) {
		return createElement('el-image', {
			attrs: {
				src: str[i],
				previewSrcList: previewSrcList,
				zIndex: 10000
				}
			});
		},
		data() {
			return {}
			}
		});
let dom = new component().$mount().$el;
$('#markdownView').append(dom);

这样就可以不固定位置的append组件到页面上啦