<style>
        #wrap {
            width: 324px;
            margin: 0 auto;
        }

        button {
            padding: 10px 20px;
            margin-bottom: 20px;
            border: none;
            border-radius: 3px;
            background: #f01414;
            color: #fff;
        }

        #intro {
            width: 300px;
            min-height: 100px;
            line-height: 20px;
            padding: 10px;
            border: 2px solid gray;
            border-radius: 3px;
        }
    </style>

<div id="wrap">
        <button>添加</button>
        <div id="intro"></div>
    </div>
    <script>
        let btn = document.getElementsByTagName('button')[0];
        let intro = document.getElementById('intro');

        const introDefault = intro_add => {
            const defaultintro = {
                name: "大话西游之月光宝盒 ",
                year: "2014",
                director: "刘镇伟",
                star: "周星驰 / 吴孟达 / 罗家英",
                type: "喜剧 / 爱情 / 奇幻 / 古装",
                introduction: "　孙悟空（周星驰）护送唐三藏（罗家英）去西天取经路上，与牛魔王合谋欲杀害唐三藏，并偷走了月光宝盒，此举使观音萌生将其铲除心思，经唐三藏请求，孙悟空被判五百年后重新投胎做人赎其罪孽...."
            }
            const { name, year, director, star, type, introduction } = { ...defaultintro, ...intro_add };
            intro.innerHTML = `<h2>名称：${name}</h2><p>导演：${director}</p><p>主演：${star}</p><p>类型：${type}</p><p>上映年份：${year}</p><p>简介：${introduction}</p>`
        };
        introDefault();
        btn.onclick = () => {
            introDefault(intro_add = {
                name: "功夫 ",
                year: "2004",
                director: "周星驰",
                star: "周星驰 / 黄圣依 ",
                type: "喜剧 / 爱情",
                introduction: "　20世纪40年代，.."
            });
        }

    </script>